python自动化编程-第十四天 HTML基础

web前端介绍

HTML - 20个标签

1. 一套规则，浏览器认识的规则

2. 开发者：

学习HTML规则
开发后台测试：
- 写html文件(充当模板的作用)
- 数据库获取数据，然后替换到html文件的指定位置(Web框架)

3. 本地测试

找到文件路径，直接浏览器打开
pycharm打开测试

4. 编写html文件

doctype 对应关系
html标签，标签内部可以写属性，====> 只能有一个html标签
注释：，多行、单行是一样的

5. 标签分类

自闭合标签最好都加上一个 /

<meta charset="UTF-8">
主动闭合标签

<title>百度</title>

6. head标签

<meta -> 编码,跳转,刷新,关键字,描述,IE兼容

 ```html
 <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7" /> 
 ```

title 标签

link 标签

图标 

```html
<link rel="shortcut icon" href="image/favicon.ico">
```

style 标签

主要是定义CSS

script 标签

主要定义javascript

7. body标签

图标

&lt; &gt; &nbsp;

p标签

段落，每个段落之间有空行

br标签

换行; 换行之间没有空行

h标签

标题标签

总结

所有的标签分为
- 块级标签： div(白板)，H系列（加大加粗），p标签（段落和段落之间有间距）
- 行内标签(内联标签)： span(白板)

标签之间可以嵌套

标签存在的意义：css操作，js操作

ps:chrome审查元素的使用
- 定位
- 查看样式

form 标签

action="http://localhost:8888/index" 数据提交到的页面
method="POST"
- method 默认是GET，
  - GET: 是将表单拼接到url上发送给服务器端
  - POST：也是提交表单，将数据放在内容中发送；
- HTTP 发送数据有两部分：
  - 请求头 get方法是将提交的数据放在请求头中
  - 请求体 post方式是将提交的数据放在请求体中
- action，表示需要返回的页面
- 主动闭合标签

input系列：

input type='text'
- name属性，value属性表示默认值
input type='passwrod'
- name属性，获取数据
input type='submit'
- value="提交" ，提交按钮，表单
input type='button'
- value="登录" ，按钮，后台只能拿到input的值

input type='radio'

<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" checked="checked"/>
女：<input type="radio" name="gender" value="2"/>

单选框，value，name属性(name相同则互斥，value表示值)
默认值属性 checked=‘checked' 表示此选项为默认值

input type='checkbox'

<p>爱好</p>
篮球:<input type="checkbox" name="favor" value="1"/>
足球:<input type="checkbox" name="favor" value="2" checked="checked"/>
皮球:<input type="checkbox" name="favor" value="3"/>
台球:<input type="checkbox" name="favor" value="4"/>
网球:<input type="checkbox" name="favor" value="5"/>

复选框，value，name属性(批量获取数据)
在后台通过 list = self.get_arguments('fovar')获取数据
默认值属性 checked=‘checked' 表示此选项为默认值

input type='file'
- 依赖 form表单的一个属性 enctype="multipart/form-data"
input type="reset" value="重置"
- 重置
多行文本输入
- <textarea name="meno" >默认值</textarea>
- name属性

下拉框

<select name="city" size="10" multiple="multiple">
    <optgroup label="安徽省">
        <option value="1">合肥</option>
    </optgroup>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected="selected">南京</option>
    <option value="4">南海</option>
</select>

name,内部option value，提交到后台
size 显示多个
muiltiple 多选
selected="selected" 默认属性

a标签

跳转

百度
```

- href="https://baidu.com"  要跳转到的页面
- target="_blank"  默认是在当前页打开，但是_blank是在新标签页打开

锚点

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<div id ='i1' style="height: 600px;">第一章内容</div>
<div id ='i2' style="height: 600px;">第二章内容</div>
<div id ='i3' style="height: 600px;">第三章内容</div>
<div id ='i4' style="height: 600px;">第四章内容</div>

href = '#某个标签的ID’ 标签的ID不允许重复

img

<a href="https://baidu.com">
    <img src="timg.jpeg" title="大美女" style="height: 200px;width: 200px;" alt="美女">
</a>

src 图片的位置
title 鼠标移动到图片时显示的文字
alt 图片没有时显示的文字
a标签包含着表示点击图片能够跳转

列表

有序列表

<ol>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ol>

无序列表

<ul>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>

分层列表

<dl>
    <dt>aaaa</dt>
    <dd>bbbb</dd>
    <dt>aaa</dt>
    <dd>bbbb</dd>
</dl>

dd 第一层
dt 第二层

表格

<table border="1">
<tr>
    <td>第一行，第1列</td>
    <td>第一行，第2列</td>
    <td>
        <a href="s2.html">查看详细</a>
        <a href="s3.html">修改</a>
    </td>
</tr>
<tr>
    <td>第二行，第1列</td>
    <td>第二行，第2列</td>
    <td>第二行，第3列</td>
</tr>
</table>

tr 行
td 列
border=‘1’ 边框
签到a标签，可以跳转

完整规范的表格代码：

<table border="1">
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头1</th>
            <th>表头1</th>
            <th>表头1</th>
            <th>表头1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td colspan="2">1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

横向合并单元格 colspan=’n‘ n表示占几格
纵向合并单元格 rowspan=’n‘ n表示占几格

label标签

<label for="username">用户名：</label>
<input id="username" type="text" name="user" />

for属性关联 input，点label也能输入username
用于点击文字，使用关联的标签获取光标

fieldset

<fieldset>
    <legend>登录</legend>
    <label for="username">用户名：</label>
    <input id="username" type="text" name="user" />
    <br />
    <label for="password">密码：</label>
    <input id="password" type="password" name="password" />
    
</fieldset>

legend 主要属性

CSS

作用：

颜色
位置
……

在标签上设置style属性：

background-color: #2459a2;
height: 48px;
……

编写CSS样式：

1. 标签的style属性

2. 写在head里面，style标签中写；

css样式也可以写在单独文件中

 <link rel="stylesheet" href="commons.css" />

id选择器

#id{
    background-color: #2459a2;
    height: 48px;
}

<标签 id='名称’></标签>

class选择器常用

.名称{
    background-color: #2459a2;
    height: 48px;
}

<标签 class='名称’></标签>

标签选择器
```
div{
    ……
}
```
所有div设置上此样式
层级选择器（空格）
```
.c1 .c2 div{
    ……
}
```
组合选择器(逗号)
```
.c1,#c2,div{
    ……
}
```
属性选择器
对选择到的标签在通过属性进行一次筛选
```
input[type='text']{
    ……
}
```
ps:优先级
- 标签上的style，编写顺序，

3. 注释

/* 注释内容 */

4. 边框

- 宽度，样式，颜色（border: 1px solid red）
- border-left

5. 字体样式

height, 高度像素，
width, 宽度像素，百分比
text-align:centr 水平方向剧中
line-height, 垂直方向根据标签高度
color, 字体颜色
font-size, 字体大小
font-weight 字体加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid red;">ssss</div>
    <div style="height: 48px;
    width: 80%;
    border: 1px solid red;
    font-size: 16px;
    /*text-align: center; 左右的剧中*/
    /*!*vertical-align: middle; 水平方向的剧中*/
    line-height: 48px;
    /*font-weight: bold; 字体加粗*/
    ">ssssss</div>
</body>
</html>

6. float

让标签浪起来，块级标签也可以堆叠

父div 管不住，父div的最后加上：
- <div style="clear: both;"></div>

7. display

display: none : 让标签消失
display: inline
display: block
display: inline-block
- 具有inline，默认自己有多少占多少
- 具有block，可以设置高度，宽度，padding，margin

行内标签：无法设置高度，宽度，padding，margin

块级标签：可以设置高度，宽度，padding，margin

8. padding margin(0,auto)

边距，
- 外边距 margin
  - margin:0 auto 表示0是上下间距，auto是左右居中
- 内边距，padding

问题

img标签默认有一个1像素的边框
设置 border:0 来删除
自适应和改变大小变形
页面最外层：设置像素的宽度 ===>最外层设置绝对宽度

自适应： media
css重用
将重复的标签单独写出来
在标签中附上2个属性的值
输入框
3个div标签 float left
line-height:20px

posted @ 2018-07-22 16:16 耳_东阅读(132) 评论(0) 收藏举报

刷新页面返回顶部

学习笔记