一、HTML结构
超文本标记语言（Hyper Text Markup Language）
HTML 代码是由“标签”构成的。
形如：
<body>hello</body>
• 标签名(body)放到<>中
• 大部分标签成对出现,<body>为开始标签,</body>为结束标签.
• 少数标签是由开始标签,称为"单标签"
• 开始标签和结束标签之间,写的是标签的内容(hello)
• 开始标签中可能会带有"属性",id属性相当于给这个标签设置了一个唯一的标识符(身份证号码)
<body id="myId">hello</body>
HTML 文件基本结构
<html> <head> <title>第一个页面</title> </head> <body> hello world </body> </html>
• html 标签是整个 html 文件的根标签(最顶层标签)
• head 标签中写页面的属性
• body 标签中写的是页面上显示的内容
• title 标签中写的是页面的标题
标签层次结构
<html> <head> <title>第一个页面</title> </head> <body> hello world </body> </html>
• head 和 body 是html 的子标签(html 就是 head 和 body 的父标签)
• title 是head 的子标签.head 是title 的父标签.
• head 和 body 之间是兄弟关系
二 HTML 常见标签
2.1 注释标签
注释不会显示在界面上,目的是提高代码的可读性
<!-- 我是注释 -->
2.2 标题标签:h1-h6
有六个,从 h1 到 h6 数字越大,则字体越小
<h1> hello </h1> <h2> hello </h2> <h3> hello </h3> <h4> hello </h4> <h5> hello </h5> <h6> hello </h6>
2.3 段落标签: p
在 p 标签中的内容为一段
<p> 这是一个段落 </p>
• p标签之间存在一个空隙
• 当前的p标签描述的段落,前面还没有缩进
• 自动根据浏览器的宽度来排版
• html 内容首尾处的换行,空格均无效
• 在 html 中文字之间输入的多个空格只相当于一个空格
• 在 html 中直接输入换行不会真的换行,而是相当于一个空格
2.4 换行标签: br
hello<br/>world
• br 是 break 的缩写,表示换行
• br 是一个单标签(不需要结束标签)
• br标签不想 p 标签那样带有一个很大的空隙.
• <br/> 是规范写法.不建议写成<br>
2.5标签格式化
<strong> strong</strong> <b>b 加粗</b> <em>倾斜</em> <i>倾斜</i> <del>删除线</del> <s>删除线</s> <ins>下划线</ins> <u> 下划线</u>
• 加粗: strong 标签和b 标签
• 倾斜: em 标签 和 i 标签
• 删除线: del 标签 和 s 标签
• 下划线: ins 标签 和 u 标签
2.6 图片标签
img 标签必须带有src 属性,表示图片的路径.
<!-- 相对路径,此时要把这个图片文件放到和html中的同级目录中 --> <img src="course.jpg" width="100px" height="200px"> <!-- 若在上一级目录文件中,相对路径可用如下方式表示 --> <img src="..\course.jpg" width="100px" height="200px"> <hr> <!-- 绝对路径 --> <img src="E:\CODE\VSCode\panda.jpg" width="300px" height="300px"> <hr> <!-- 网络路径 --> <img src="https://gd-hbimg.huaban.com/8bfe08162f50181c287ef3e2c9d16807e24b5bef2e7905-BV3Ogq_fw480webp" alt="这是一簇花" title="花" width=100px height=200px><br> <img src="https://gd-hbimg.huaban.com/d9f99631a4e78bb592ca2b7d57698a024fa84f259efe1a-EGoH7V_fw1200" width="200" height="300">
• alt: 替换文本.当文本不能正确显示的时候,会显示一个替换的文字
• title: 提示文本,鼠标放到图片上,就会有提示
• width/height: 控制宽度和高度,高度和宽度一般改一个就行,另外一个会等比例缩放,否则图片就会失衡.
• border: 边框, 参数是宽度的像素,但是一般使用 CSS来设定.
注意:
1.属性可以有多个,但是不能写到标签之前
2.属行之间用空格分割,可以是多个空格,也可以是换行
3.属性之间不分先后顺序
4. 属性使用"键值对"的格式来表示.
2.7 超链接标签: a
<a href="https://www.baidu.com/" target="blank">百度</a>
• href: 必须具备,表示点击后会跳转到哪个页面
• target: 打开方式, 默认_self. 如果是 _blank. 则用新的标签页打开.
• 空连接: 使用 # 在 href 中占用.
<a href="#">空链接</a><br>
• 下载链接: href 对应的路径是一个文件.(可以是.zip 文件)
<a href="test.zip">下载文件</a>
• 网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)
<a href="https://www.sogou.com/"> <img src="https://gd-hbimg.huaban.com/d9f99631a4e78bb592ca2b7d57698a024fa84f259efe1a-EGoH7V_fw1200" width="200" height="300"> </a>
• 锚点链接:可以快速定位到页面中的某个位置
<a href="#panda"><strong> strong</strong></a> <a href="#图片"> <b>b 加粗</b></a> <img id="panda" src="E:\CODE\VSCode\panda.jpg" width="300px" height="300px"> <img id="图片" src="https://gdhbimg.huaban.com/d9f99631a4e78bb592ca2b7d57698a024fa84f259efe1a-EGoH7V_fw1200" width="200" height="300"><br>
禁止 a 标签跳转:<a href =" javascript : void(0) ;"> 或者 <a href = " javascript:;">
2.8 表格标签
• table 标签: 表示整个表格
• tr : 表时表格的一行
• td: 表示一个单元格
• th: 表示标头单元格.会居中加粗
• thead: 表格的头部区域(注意和 th 的区别, 范围是要比 th 大的)
• tbody: 表格得到主体区域.
<table border="1" width="200px" heigth="300px"> <thead> <th>姓名</th> <th>年龄</th> <th>性别</th> </thead> <tbody> <tr> <td>张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> </tr> </tbody> </table>
合并单元格
(1) 跨行合并 : rowspan="n"
(2) 跨列合并 : colspan="n"
步骤:
1.先确定跨行还是跨列
2.找好目标单元格(跨列合并,左侧是目标单元格;跨行合并,上方是目标单元格)
3.删除多余的单元格
<table border="1" width="200px" heigth="300px"> <thead> <th>姓名</th> <th>年龄</th> <th>性别</th> </thead> <tbody> <tr> <td>张三</td> <td rowspan="2">18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>女</td> </tr> <tr> <td>王五</td> <td colspan="2">22|男</td> </tr> </tbody> </table>
2.9 列表标签
<h3>无序列表</h3> <ul> <li>java</li> <li>python</li> <li>c++</li> </ul> <P></P> <h3>有序列表</h3> <ol> <li>事务</li> <li>回滚</li> <li>连表查询</li> </ol> <p></p> <h3>自定义列表</h3> <dl> <dt>我的老婆们</dt> <dd>阿猫</dd> <dd>阿狗</dd> <dd>阿兔</dd> </dl>
• 元素之间是并列关系
• ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd
• li 中可以放其他标签
• 列表中带有自己的样式, 可以使用 CSS 来修改
2.10 表单标签
表单是让客户输入信息的重要途径
分成两个部分:
• 表单域: 包含表单元素的区域,重点是 form 标签
• 表单控件: 输入框,提交按钮等. 重点是 input 标签
form 标签 :
<form action="https://www.javacn.site/" method="get"> ... </form>
input 标签:
<form action="https://www.javacn.site/" method="get"> <!-- 文本框 --> 姓名:<input type="text"><br> <!-- 密码框 --> 密码:<input type="password"><br> <!-- 单选框 --> 性别:<input type="radio" name="sex" >男 <input type="radio" name="sex">女<br> <!-- 复选框 --> 爱好:<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 瑟瑟<br> <!-- 普通按钮 --> <input type="button" value="普通按钮"><br> <!-- 当前点击了没有反应,需要搭配 JS 使用 --> <input type="button" value="我是个按钮" onclick="alert('hello')"><br> <!-- 提交按钮(按钮必须放到 form 标签内) --> <input type="submit" value="提交" ><br> <!-- 清空按钮 --> <input type="reset" value="清除"><br> <!-- 选择文件标签 --> <input type="file"><br> 所属院校: <select> <option>北京大学</option> <!-- selected 可以指定默认大学,默认是清华大学 --> <option selected="selected">南京大学</option> <option>清华大学</option> <option>河南大学</option> </select> <br> 简介: <textarea rows="4" cols="50"> </textarea> </form>
对应运行截图:
2.11 无语义标签: div & span
div 标签,division 的缩写, 含义是分割
span 标签, 含义是跨度
这两个用于网页布局:
• div 是独占一行,是一个大盒子
• span 不独占一行,是一个小盒子
三 HTML 特殊字符
空格:
小于号: <
大于号: >
按位与: &
