这一阶段的老师说话声音真的好好听，就是听着听着就有点困
重点内容单独记，本单元主体框架及基本内容见下方。
HTML常用标签：
（1）结构标签
（2）字体标签
（3）排版标签
- 标题标签 h
- 段落标签 p
- 字体加粗标签 b
- 字体斜体标签 i
- 字体下划线标签 u
- 居中标签 center
- 换行标签 br
- 水平线标签 hr
（4）图片标签：img
（5）列表标签 ol/ul li
（6）超链接 href
(7) 表格标签 table
（8）表单标签 form
（9）分组标签 div/span
(10) 特殊字符
主题框架：
<html>
<head>
<meta charset="utf-8">
<title>这里是标签标签</title>
</head>
<body>
这里是主体标签~QAQ.
</body>
</html>Html的结构标签
html标签可以嵌套，不可以交叉
根标签:<html></html>
<head>–HTML的头标签
可包含title，meta，script，style，link
<head>
<tiele> 我是标题 </title>
<meta charset = “utf-8”>
</head>
<body> —HTML的体标签
<html>
<!--html标签可以嵌套，不可以交叉-->
<head>
<title>这是一个HTML</title>
<meta charset="Utf-8"/>
</head>
<body>
this is first
这是一个 html
</body>
</html>
字体标签
<font> 标签 ：HTML中的字体标签
使用：<font> 文字</font>
<font> 标签的属性
<标签 属性名 = ” 属性值” 属性名 = ” 属性值 ” > </标签>
属性:
COLOR属性：字体颜色
英文单词设置：black，red，green，blue。。。
使用16进制数设置：#FFFFFF , #FFF;
SIZE属性：字体的大小 后面单位是像素
例子：
<body>
这里是主体标签~QAQ.
<!-- <font color = "red" size = "300px">
琳琳
琳琳
琳琳
</font> -->
<p style="color: blue;font-size: 60px;">
狼烟风沙口。还请将军少饮酒
</p>
</body>
排版标签一：
标题标签：h标签<h1><h2>…<h6>
<!--HTML的标题标签--->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>段落标签：p标签
<p> 一段文字 </p>字体加粗标签 ： b标签
<b> 坚磐最棒</b>字体斜体标签 ：i标签
<i>坚磐最棒</i>字体下划线标签： u
<u>字体下划线</u>
居中标签：<center>标签
<center> 内容</center>br标签: 换行
<br/>hr标签：水平线
<hr/><图片标签>:<img>
属性：
src : 图片的来源
width : 图片的宽度
height : 图片的高度
alt ： 图片找不到显示的内容
图片的引用的路径问题：
绝对路径：从盘符开始定位
相对路径：.当前目录 ..上级目录
如果引入的图片和html文件在同一级路径。直接写文件名或者/文件名
<img src = “cs10006.jpg”/>
<img src = “/cs100006.jpg”/>
见详细章节，单独讲
<列表标签>
<ol start="" type="a">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<ul>
<!--无序列表的type属性，disc实心圆，circle空心圆，square方块-->
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>超链接
<a href="http://www.baidu.com">在当前页面跳转</a><br/>
<a href="http://www.baidu.com" target="_blank">新建一个跳转</a><br/>
<a href="http://www.baidu.com" target="_self">默认的</a><br/>表格标签
<table border="50" width = "50%" height="50%" cellspacing="22" cellpadding="12" align="center">
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td colspan="2">31</td>
<td>33</td>
</tr>
</table>
table的属性：
边框：border=”1″
表格里单元格之间的距离：cellspacing=”22″
表格里单元格内的空白部分：cellpadding = “12”
表格水平位置:align = “center”
td的属性：
列数：colspan
行数：rowspan
表单标签
<form action="http://www.baidu.com" method+'get'>
<!--文本框中readonly=“readonly”只读-->
姓名：<input name="username" value="请输入姓名" type="text" size="15px" maxlength="8"/>
<br/>
<!--密码框-->
密码:<input name="password" type="password" value="123456" size="15px" maxlength="12">
<br/>
邮箱：<input type="email" name="email">
<br/>
<!--单选按钮-->
性别：
男<input type="radio" name="sex" value="man" checked = "checked"/>
女<input type="radio" name="sex" value="woman"/>
<br/>
<!--复选按钮-->
爱好：
唱歌<input type="checkbox" name="hobby" value="sing" checked="checkbox"/>
跳舞<input type="checkbox" name="hobby" value="dancing" />
滑雪<input type="checkbox" name="hobby" value="skiing" />
<br/>
<!--下来列表-->
出生地<select name="birthAddr" id="">
<option value="hz">杭州</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
</select>
<!--提交按钮-->
<input type="submit" value="提交">
<!--普通按钮-->
<input type="button" value="重置">
<br/>
<!--文本域-->
简介:<textarea name="info" id="" cols="5" rows="5"></textarea>
</form>分组标签
<!--块级元素，独占一行-->
<div style="background-color: darkorange;">块级元素</div>
<!--内练元素，不会占一行-->
<span style="background-color: red;">内联元素，不会占一行</span>
特殊字符
空格
大于>
小于<
版权©
商标®
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/114796.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...