HTML速记
html：页面显示的内容
css：进行样式布局的
js：让页面元素动起来
关于标签的嵌套
- 超链接不能嵌套超链接
- P标签不能嵌套P标签
- 标题标签h1…h6也不能互相嵌套
html标签
<head>
<!-- 字符集 -->
<meta charset="utf-8">
<!-- 网页的标题 -->
<title>运行后网页的标题</title>
</head>
<body>
<!-- <br> ：换行标签 -->
1、br换行标签<br>
<!-- 水平线/分割线
width 宽度
align ： 默认居中
可设置左对齐或者右对齐
-->
2、hr：水平线，可设宽高<hr width="30%" align="left">
<br>
<!-- 3、字体标签 font
size：范围1-7 字体由小到大
color：设置字体颜色
face：字体
-->
<font size="3" color="blue" face="黑体">3、字体标签font： size="3" color="blue" face="黑体"--size：范围1-7；字体由小到大，7最大1最小</font>
<br>
<font size="1" color="#8ACD5A" face="宋体">size=1，face="宋体"的字体</font>
<br>
<br>
<!-- 4、img 标签可以引入图片
src:图片路径
height：图片的高
width：图片的宽
title：鼠标悬停时的提示信息
alt：图片地址错误时的信息
px: 像素单位， 100px:100像素
width=“100%” ： 100%表示铺满整个页面
-->
4、img 图片标签 ：img src="1.jpg" height="50px" width="100px" title="悬停信息" alt="图片找不到后提示的信息"
<img src="1.jpg" height="50px" width="100px" title="悬停信息" alt="图片找不到后提示的信息">
<!-- 5、标题标签 h1-h6 会自动换行 -->
<h1>5、标题标签 h1-6,会自动换行</h1>
<h6>标题标签 h6，h5很少用</h6>
<!-- p 标签是段落标签，会自动换行 -->
<p>段落标签：p标签，会自动换行</p>
<!--加粗倾斜-->
6、文本修饰标签
<b>加粗b标签</b>
<i>倾斜i标签</i>
<u>下划线u标签</u>
删除和插入一般配合使用
<del>删除线del标签</del>
<ins>插入文本ins</ins>
<strong>强调标签strong，也会加粗</strong>
<em>强调标签em，也会倾斜</em>
<sub>下标文本sub</sub>
<sup>上标文本sup</sup>
<br>
<br>
<!-- 表格标签table: -->
7、表格标签table: tr--代表一行;
th--代表每一个表头单元格，会自动加粗居中;
td--一个普通的单元格。
caption--定义表格标题
td-cellspacing-单元格间隙
td-align=“center”：对齐方式
表格宽度、内容居中的简便写法：col width="80px"> col :表示列，单向标签
<br>
table：border="2px" cellspacing="0px" background="1.jpg" 可设表格外框粗细及图片背景。
<br>
跨行合并单元格：td:rowspan="2"
<br>
跨列合并：colspan="xx"
<br>
<!-- tr：代表一行
th:代表每一个表头单元格，表头单元格会自动加粗并居中显示。
td:一个普通的单元格
-->
<table border="2px" cellspacing="0px" background="1.jpg">
table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249"
<tr>
<!-- Ctrl + shirt + R -->
<th>tr</th>
<th>th</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
<tr>
<th>tr</th>
<td>td</td>
<td>小名</td>
<td>71</td>
<td rowspan="2">男</td>
<td>44</td>
</tr>
<tr>
<th>tr</th>
<td>td</td>
<td>100</td>
<td>89</td>
</tr>
</table>
<!-- 8、多媒体标签和超链接标签
embed音频、视频 -->
8、多媒体（音频、视频）embed标签；背景音乐(audio)；视频(video)
<embed src="xx.mp3" width="200px" height="50px">
<embed src="xxx.mp4">
src资源路径
controls：控制条
autoplay：自动放
<video src=“xx.mp4” controls autoplay></video>
<audio src="xx.mp3" controls autoplay></audio>
<br>
<!-- 超链接a标签--默认在当前页面打开；设置target="_blank" 会在一个新的标签页打开
-->
超链接a标签-加target="_blank" 会打开一个新的标签页。
<br>
外部链接：（网址）
<a href="http://www.baidu.com">点击百度（在此页点开）</a>
<br>
内部链接：（项目内，如html文件）
<a href="new_file01.html" target="_blank">点击html文件</a>
<br>
下载链接（文件或压缩包时，会进行下载）：
<a href="xx.mp4">视频链接</a>
<br>
空链接：（href="#"）
<a href="#">这个是空链接</a>
<br>
通过base标签统一设置页面超链接的显示目标< base target="_blank" / >
<!-- 9、列表标签 -->
<!-- 无序列表ul-li -->
<h4>9、列表标签</h4>
<ul type="square">
无序列表ul-li;直接在< ul>< /ul>标签中输入其他标签或者文字的做法是不被允许的。
设置项目序号：
type="disc" 默认实心圆
type="circle" 空心圆
type="square" 实心方块
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<!-- 有序列表ol:type="I"-->
<ol type="I">
有序列表ol:type="I/1/A/a/i";ol-li
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ol>
<!-- 定义列表dl:-->
<dl>
定义列表dl:（多用于页面底端，如注明一些人）
<dt>dt:定义专业术语或名词</dt>
<dd>dd:对名词进行解释 </dd>
<dt>dt:html</dt>
<dd>dd:超文本标记语言 </dd>
</dl>
<!--10、 锚点设置 -->
<ul>
10、 锚点设置（两种实现方法#id或name属性）：点哪跳哪（运用：回到顶部）(li+a标签;#id/name属性)
<li ><a href="#qq">用户管理</a></li>
<li ><a href="#ae">订单管理</a></li>
</ul>
<!-- 或设id -->
<a name="qq"></a>
<h1>用户管理</h1>
<p>张三</p>
<a name="ae"></a>
<h1>订单管理</h1>
<p>张三李四</p>
<p>李四</p>
<!-- 11、内嵌式框架iframe -->
11、内嵌式框架iframe
<iframe src="xx.html" width="500px" height="500px"></iframe>
<br>
<!-- 12、实体字符 -->
12、实体字符：
<h5>“&+lt、&+gt”：大于小于号</h5>
<、>
<br>
<h5>“&+quot：双引号”</h5>
"双引号"
<br>
<h5>&+reg：®注册商标；版权符©：&+copy;摄氏度&+deg；空格&+nbsp（要加；）”</h5>
注册商标®；
版权符©；
摄氏度°；
<h5>“&+euro：€”</h5>
€
<br>
<img src="https://i-blog.csdnimg.cn/blog_migrate/de49808d3c828e876e1a9eb75c1962a3.png" alt="">
<h3>13、div和span标签:是没有语义的,是我们网页布局最主要的2个盒子。
div是division缩写，表示分割，分区。span意为跨度、跨距。</h3>
<div>div标签用来布局，但是一行只能放一个<div>xxxx（div会自动换行）xxx大盒子
<br>
<span>span标签用来布局，一行可以放多个<span>
<br>
14、表单form-input/select/textarea
<form action="url" method="提交方式get/post" name="表单域名"> 表单控件</form>
<h3>1、input 控件 </h3>
<!--1. text属性：文本框。
2. password:密码框。
3. radio （小圆框）如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个。（radio、checkbox按钮name值要一样！！！要求单选按钮和复选框要有相同的name值）
4. checkbox （小方框）属性。
5. button属性：普通按钮框。
6. submit属性：点击提交按钮后，把表单域form的表单元素里面的值传到后台服务器；type="submit"：提交按钮。
7. reset属性：重置按钮
8. image属性
9. file属性：上传文件、头像 -->
<input type="text" value="hi">input不会自动换行
<br>
性别：
男<input type="radio" name="radio">
女<input type="radio" name="radio">
<br>
爱好：
吃饭<input type="checkbox" name="hobby">
睡觉<input type="checkbox" name="hobby">
打豆豆<input type="checkbox" name="hobby">
<!--8. placeholder:灰色字的提示
9. size属性
10. value属性：打开页面就默认显示的字，用value 来设置。
11. name属性：表单名字， 后台通过name属性找到这个表单。 用于区别不同的表单。（name和value是每个表单元素都有的属性值主要给后台人员使用）
12. checked属性：表示默认选中状态。 较常见于 单选按钮和复选按钮。
13. maxlength：正整数；现定输入字段中的字符的最大长度。
14. disabled ：禁止选中。
15. label 标签为 input 元素定义标注（标签）：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
- 第一种用法就是用label标签直接包含input表单， 适合单个表单选择
- 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)： 通过设置for 属性与元素id的值相同来绑定。 -->
<br>
<br>
<b>label标签：选文字或按钮或男/女字都能选：通过设置for 属性与元素id的值相同来绑定。</b>
<br>
<label for="username">用户名:</label>
<input type="text" id="username">
<br>
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
<h3>2、select下拉列表 </h3>
<p>最少要有一个option。</p>
- 在option中定义selected =" selected "时，当前项即为默认选中项。
<br>
- 在option中定义disabled ：禁止选中。disabled="disabled"
<br>
- 在option中定义multiple：可以实现多选。可显示多个下拉值。multiple="multiple"
<br>
- size:下拉框显示个数。（默认为1；如size="2"）
<br>
</p>
籍贯: <select>
<option>上海</option>
<option>北京</option>
<option selected="selected">广州</option>
</select>
<br>
显示2个下拉框值 :
<select size="2">
<option>上海</option>
<option selected="selected">广州</option>
<option>北京</option>
</select>
<br>
<br>
显示多个下拉框值
<select multiple="multiple">
<option >吃</option>
<option>北京</option>
<option>地方</option>
<option disabled ="disabled">和</option>
<option>预定</option>
</select>
<h3>3、textarea控件(文本域)</h3>
<!-- 通过textarea控件可以轻松地创建多行文本输入框.
- cols=“每行中的字符数” rows=“显示的行数” (我们在实际开发中不会使用，都是用CSS来改变大小) -->
留言: <textarea cols="50" rows="5">留言用textarea写的xxx. </textarea>
<br>
<!-- 13、相对路径-->
15、相对路径：一点.表示当前路径；两个.表示上一级路径。
<br>
<!-- 14、marquee标签-->
16、marquee标签：跑马灯效果标签
<br>
<br>
<!-- 15、日期 -->
17、年月日：input type="date" value="2022-12-12" name="mouth_start/end:年月日开始-结束形式：
<br>
<input type="date" value="2022-12-12" name="mouth_start"/>
<input type="date" value="2022-12-12" name="mouth_end"/>
<br>
<!-- type=date 年月日时分形式 -->
年月日时分形式：type="datetime-local"
<br>
<input type="datetime-local" value="2022-12-12" name="mouth_end"/>
</body>
扫一扫
18万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
