前端基础01 HTML
HTML标签格式
几个重要的标签属性
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）
HTML注释
<!--注释内容-->
PyCharm中设置注释符：
Settings-Languages & Frameworks-Python Template Languages
选择None注释符为<!---->，选择Django注释符为{##}
head内常用标签
| 标签 | 意义 |
|---|---|
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式表 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
Meta标签
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
body内常用标签
a标签
超链接标签
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>href属性指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
标签分类:
块儿级标签 h1~h6 div p hr
默认占浏览器宽度
能设置长和宽
内联标签(行内标签) a img u s i b span
根据内容决定长度
不能设置长和宽列表
无序列表
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>type属性：none（无样式）
有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>表格
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label for="check1"></label>
<input id="check1" type="checkbox">
</td>
<td>夏小沫</td>
<td>18</td>
</tr>
<tr>
<td>
<label for="check2"></label>
<input id="check2" type="checkbox">
</td>
<td>小小瓜</td>
<td>3</td>
</tr>
</tbody>
</table>属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
快捷方式
1.生成四个h1标签，每个h1标签里包含一个a标签，每个a标签里包含class属性，四个标签的内容按顺序生成
$代表序号
{}表示标签里面的内容
h1*4>a.cl{a标签$}按tab后生成
<h1><a href="" class="cl">a标签1</a></h1>
<h1><a href="" class="cl">a标签2</a></h1>
<h1><a href="" class="cl">a标签3</a></h1>
<h1><a href="" class="cl">a标签4</a></h1>2.在上面的基础上加上id
h1*4>a.cl[id=a$]{a标签$}按tab后生成
<h1><a href="" class="cl" id="a1">a标签1</a></h1>
<h1><a href="" class="cl" id="a2">a标签2</a></h1>
<h1><a href="" class="cl" id="a3">a标签3</a></h1>
<h1><a href="" class="cl" id="a4">a标签4</a></h1>标签的嵌套规则
行内标签不能嵌套块级标签
p标签不能嵌套块级标签
form表单
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集） |
| action | 规定向何处提交表单的地址（URL）（提交页面） |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启） |
| enctype | 规定被提交数据的编码（默认：url-encoded） |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET） |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name） |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self） |
input
<input> 元素会根据不同的type属性，变化为多种形态
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type="text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮，多用js绑定事件 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
select标签
下拉菜单
<form action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</form>option 具体的下拉选项
optgroup 分组的下拉框
-label="上海"
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
label标签
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form><label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
转载于:https://blog.51cto.com/dzm911/2085597
下一篇： Python基础——函数