html主要框架:
<html>
<!--头部-->
<head>
<title>标题</title>
</head>
<!--主体-->
<body>
</body>
</html>
一、标签
1.加粗<strong></strong> b
2.倾斜<em></em> i
3.下划线<ins></ins> u
4.删除线<del></del> s
5.单标签:
<br> 换行
<hr>水平线
6.注释:<!--...-->
7.分级标题:<h1></h1>....<h6></h6>
8.段落标签:<p></p>
9.图片:<img src=”图片的URL” alt=”显示不出替代文字” title=”鼠标移到提示文字” width=”100” height="100">
Alt 替换文本
Title 提示文本
Width 图片宽度
Height 图片高度
10.url路径选择
. 当前文件所在文件夹
.. 上级文件夹
/ 进入某个文件夹里面
11. 超链接:<a href=”https://www.baidu.com” target=”_blank”>跳转到百度</a>新窗口打开
href属性值写#为空链接,不会跳转。
12. 音频标签:<audio src=”音频的URL” ></audio>
常见属性:src controls(显示音频控制面板) loop(循环播放) autoplay(自动播放)
13.视频标签:<video src=”视频的URL” ></video>
属性: src controls loop muted(静音播放) autoplay (自动播放必须要静音)
二、列表
作用:布局内容排列整齐的区域
列表分类:无序列表、有序列表、定义列表
1.无序列表标签:ul嵌套li ,ul是无序列表,li是列表条目
<ul>
<li> 第一项</li>
<li> 第二项</li>
……
</ul>
注意:ul只能包裹li标签,li里可包裹任何内容
2.有序列表标签:ol嵌套li ,ul是无序列表,li是列表条目
<ol>
<li> 第一项</li>
<li> 第二项</li>
……
</ol>
3.定义列表标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述
<dl>
<dt>列表标题</dt>
<dd>列表描述</dd>
……
</dl>
三、表格
标签:table嵌套tr(行),tr嵌套td(内容单元格)/th(表头单元格,默认居中加粗)。
border属性添加表格边框线。
<table border=”1”>
<tr>
<th>姓名</th>
<th>班级</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>三班</td>
<td>285</td>
</tr>
</table>
表格结构标签:thead 表格头部 tbody表格主体 tfoot表格底部
合并单元格:跨行合并,保留最上单元格,添加属性rowspan,合并几个单元格数字为几。
例:<td rowspan=’2’>100</td>
跨列合并,保留最左单元格,添加属性colspan 例:<td colspan=’2’>100</td>
四、表单
作用:收集用户信息。
使用场景:登录页面,注册页面,搜索区域
input标签 :type属性值不同功能不同 <input type=”...”>
type属性:
text 文本框,用于属于单行文本
password 密码框
radio 单选框
checkbox 多选框
file 上传文件
input标签占位文本:
作用:提示信息,文本框和密码框都可以使用
<inptu type="..." placeholder="提示信息">
1.单选框radio
常用属性:name 控件名称,checked 默认选中
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender" > 女
2.上传文件file
默认选一个文件,添加multiple属性可实现文件多选功能。
<input type="file" multiple>
3.多选框:
<input type="checkbox">a
<br>
<input type="checkbox" checked>b
<br>
<input type="checkbox">c
多选框默认选中:checked属性
4.密码框
<input type="password">
5.下拉菜单标签:
select嵌套option,select是下拉菜单整体,option是下拉菜单每一项。
<select>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option selected>重庆</option>
</select>
6.文本域:
多行输入文本表单控件 <textarea cols="30" rows="10"> 默认提示文字</textarea>
注:右下角拖拽功能一般禁用,工作中用css设置尺寸
7.lable标签:
网页中,某个标签的说明文本。用label标签绑定文字和表单控件关系,增大表单控件点击范围。
写法:1. label标签只包裹内容,for属性值与表单控件id属性值相同
<input type="radio" id="man"><lable for="man"> 男</lable>
2. label标签包裹文字和表单控件,不要属性
<label><input type="radio">女</label>
提示:支持label增大点击范围的表单控件:文本框,密码框,上传文件,单选框,多选框,下拉菜单,文本域。
8.按钮button:
<button type="">按钮</button>
type属性: submit 提交按钮(默认)
reset 重置按钮
button 普通按钮,一般配合javascript使用
内容包含在form表单区域里面:
<form>
用户名:<input type="text">
<br>
密码:<input type="password">
<br>
<button type="reset">重置</button>
</form>
9.无语义布局标签:
- <div>每个div标签独占一行</div>
- <span>span标签,不换行</span> 两个span标签也在同一行
10.字符实体:
在网页中显示预留字符
- 空格  ;
- < < <;
- > > >;