HTML笔记
1、HTML介绍
HTML指的是超文本标记语言(Hyper Text Markup Language)
HTML不是一种编程语言,而是一种标记语言(markup language)
标记语言是一套标记标签(Markup tag)
HTML使用标记标签来描述网页
2、HTML标签
HTML标签:
HTML标记标签通常被称为HTML标签(HTML tag)。
HTML标签是由尖括号包围的关键词,如<html>
HTML标签是成对出现的
标签对中的第一个标签是开始标签,第二个标签的结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML标签不区分大小写
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是啥?</title> </head> <body> 文本主体 </body> <!-- 注释快捷键:Ctrl+/ HTML文件主要包含两个部分: 头部head:meta标签(置网页编码格式)itle标签(设置网页标题)、 体部body:主要放置我们的HTML页面内容 --> </html>
2.1标题标签
<h1>第1级标题</h1> <h2>第2级标题</h2> <h3>第3级标题</h3> <h4>第4级标题</h4> <h5>第5级标题</h5> <h6>第6级标题</h6>
2.2图片标签
<!-- 相对路径和绝对路径 属性width:宽,height:高, title:鼠标移到图片上会提示文字,atl:图片加载失败是提示--> <img src="img/srt.jpg" width="200" height="200" title="鼠标移到我就显示出来" alt="没有找到这个图片"/> <img src="img/rt.jpg" width="200" height="200" title="鼠标移到我就显示出来" alt="没有找到这个图片"/>
2.3段落标签
<!-- 段落 独占一行 --> <p>段落1</p><p>段落2</p>
2.4链接标签
<!-- 链接标签 href:跳转路径(域名或文件路径), target(属性):_blank(打开新窗口),_self(覆盖原来窗口) 不独占一行--> <a href="https://www.baidu.com/?tn=65081411_1_oem_dg" target="_blank">百度1</a> <a href="https://www.baidu.com/?tn=65081411_1_oem_dg" target="_self">百度</a>
2.4.1锚点
<!-- 锚点 href:跳转到的位置() --> <a href="#bottom">跳转到底部</a> <p id="p">段落8</p> <a id="bottom" href="#">跳转到顶部</a> <a id="p" href="#">跳转到段落8</a>
2.5列表标签
2.5.1有序列表标签
<!-- 有序 :li必须在ol里面 type:1(默认值),A,I,i,a有这几种, start="2":表示编号从2开始排列 都独占一行--> <ol type="1" start="2"> <li>2</li> <li>1</li> </ol>
2.5.2无序列表标签
<!-- 无序 itemtype:disc实心,cirecle空心圆,square实心方块 都独占一行--> <ul itemtype="cicrle"> <li>2</li> <li>3</li> <li>4</li> </ul>
2.6div标签
<div> 内容框 </div>
2.7表格标签
<!--表标签:table(表示表格),thead(表头),tr(表的一行),th(表头列) tbody(表体),td(表体列) 属性:border(表格边框),width(表格宽高),cellspacing(表格空间,设置为0 可以取消边框之间的间隙) cellpadding(每个格的大小),align(对齐方式)rowspan="合并列数"(合并列),colspan="合并行数"(合并行)--> <table border="1px" width="600px" cellspacing="0" cellpadding="10"> <!-- 表头 --> <thead> <tr align="ceter"> <th>id</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <!-- 表体 --> <tbody> <!-- 第一列 --> <tr align="ceter"> <td>1</td> <td>雨</td> <td rowspan="2">25</td> </tr> <!-- 第二列 --> <tr align="ceter"> <td>2</td> <td>阳</td> </tr> <tr align="ceter"> <td>2</td> <td colspan="2">总结</td> </tr> </tbody> </table>
2.8表单标签
<!--form表单自动提交数据 属性:action(表单要交到哪个页面),method(提交的方式get 和 post) input(文本框):name(名称属性 form表单默认获取value内容,其他根据name获取value内容) placeholder(文本框提示) --> 账号:<input type="text" name="userName" placeholder="请输入账号"/><br /> 密码:<input type="text" name="pass" placeholder="请输入密码"/><br /> <!-- name必须保持统一才能实现单选 --> 性别:<input type="radio" name="sex" value="male"/>男 <input type="radio" name="sex" value="female"/>女<br /> <!-- name不一定一致,建议一致好进行数据处理 --> 爱好:<input type="checkbox" name="boy" value="basketbll"/>篮球 <input type="checkbox" name="boy" value="football"/>足球<br /> 星座:<select name="star"> <option value="1">白羊座</option> <option value="2">狮子座</option> <option value="3">射手座</option> </select><br /> <!-- 根据name提交数据,rows="5"(空白页面显示的行数) cols="60"(备注框的宽度)--> 备注:<textarea name="reamrk" rows="4" cols="60"></textarea><br /> <!-- 两种按钮方式:input,button --> <input type="submit"/> <button id="btn">注册</button>
2.9span标签
<!-- span標簽:不能设置属性,不换行--> <span>文字1</span><br /> <span>文字2</span>
2.10换行标签
<!-- br标签:换行--> <span>文字1</span><br /> <span>文字2</span>
2.11水平线标签
<!-- hr标签:水平分割线,独占一行--> <hr />
2.12粗体/斜体/下划线标签
<!-- 粗体b,stong(语句强调) --> <strong>神1</strong> <b>神</b> <!-- 斜体 i,em(语句强调)--> <i>阳1</i> <em>阳</em> <!-- 下划线 --> <u>雨</u>
2.13上标/下标标签
<!-- 上标 --> <br /> 4<sup>2</sup> <!-- 下标 --> h<sub>x</sub>
2.14HTML字符实体
<!-- 文本空格 --> <!-- 大于 --> > <!-- 小于 --> < <!-- 大于等于 --> ≥ <!-- 小于等于 --> ≤ <!-- 注册商标 --> ® <!-- 版权 --> ©
2.15iframe
<h3>第3级标题</h3> <h4>第4级标题</h4> <h5>第5级标题</h5> <h6>第6级标题</h6>
3、块元素和行元素
块元素独占一行,可以直接style=""属性操作。行元素不独占一行,不能直接style=“”操作属性