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>