1.什么是HTML？
1. Hyper Text Markup Language (超文本标记语言) 2.W3C标准 World wide web Consortium(万维网联盟)--->web技术领域最权威和具有影响力的 国际中立性技术标准机构。 3.W3C标准包括 (1).结构化标准语言(HTML XML) (2).表现标准语言（CSS） (3).行为标准(DOM.ECMAScript)
2.HTML基本结构
<body>、</body>等成对的白哦前，分别叫做"开放标签"和"闭合标签",单独呈现的标签(空元素) ,如<hr/>;意为用 "/" 来关闭空元素。
3.网页基本信息
1.HTML: 注释: <!--****-- > 2.<meta > 描述性标签，它用来描述我们网站的一些信息 3.<title> 标签的内容</title> 4.<body>hello world!</body> 在网页中输入hello world!
<!--告诉浏览器，我们要使用什么规范--> <!DOCTYPE html> <html lang="en"> <!-- head标签代表网页头部--> <head> <!-- meta描述性标签，它用来描述我们网站的一些信息--> <meta charset="UTF-8"> <meta name="keyworld" content="吉士先生，CSDN"> <meta name="description" content="来这个地方梦启航的开始"> <!-- 网页标题 --> <title>吉士先生第一个网页</title> </head> <!-- body标签代表网页主体--> <body> hello world! </body> </html>
4.网页基本标签
1.<hn> <hn> ----->n级标签 2.<p> <p> ------>段落标签 3.<hr/> -------->水平线标签 4.<br/> -------->换行标签 5.<strong> <strong> ----->黑体 6.<em> <em> ------->斜体 7. --------->空格 8.© ---------->版权
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签学习</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> <!--段落 标签--> <p>两只老虎爱跳舞，小兔子乖乖拔萝卜，</p> <p>我和小鸭子学走路，童年是最美的礼物。</p> <p>小螺号呀嘀嘀地吹，我学海鸥展翅飞，</p> <p>不怕风雨不怕累，快快把本领都学会。</p> <p>宝贝，星星为你指路，哦？</p> <p>宝贝，月亮为你祝福，哦！</p> <!--水平线标签--> <hr/> <!--黄行标签--> 两只老虎爱跳舞，小兔子乖乖拔萝卜，<br/> 我和小鸭子学走路，童年是最美的礼物。<br/> 小螺号呀嘀嘀地吹，我学海鸥展翅飞，<br/> 不怕风雨不怕累，快快把本领都学会。<br/> 宝贝，星星为你指路，哦？<br/> 宝贝，月亮为你祝福，哦！<br/> <!--粗体，斜体--> <h1>字体样式标签</h1> 粗体: <strong>i love you?</strong> <br/> 斜体: <em>i love you!</em> <br/> <!--特殊符号--> 空 格 :<br/> 空 格<br/> ><br/> <<br/> ©版权所有吉士先生!<br/> </body> </html>
5.图像标签:
必须要写地: <img src="" alt="" title="">
<img src="" alt="" title="" wideth="" height=""> 1. ../表示上一级目录 2. src: 图片的地址/绝对地址/相对地址 3. alt: 图片名字 4. title: 悬停文字 5. wideth: 宽度 6. height: 长度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图像标签学习</title> </head> <body> <!-- src: 图片地址 相对地址: 绝对地址: <盘符写的> ../ --》表示上一级目录 --> <img src="../resources/imag/1.jpg" alt="吉士先生头像" title="悬停文字" width="300" height="300"> </body> </html>
6.超链接标签及应用
超链接:必写项目: <a herf="跳转内容" targect="跳转方式"></a> 锚链接必写: <a id="标记内容">点击我跳转</a> <a herf="#标记内容">点击我跳转页面</a
1.超链接: <a herf="跳转内容" targect="跳转方式">点击我跳转链接</a> 跳转方式: _blank 打开另一个页面 _self 在本页面打开 eg: 跳转百度:<a herf="https://www.baidu.com">跳转百度</a> 2.锚链接: <a id="标记内容">点击我跳转</a> <a herf="#标记内容">点击我跳转页面</a> 3.功能性链接: <a herf="mailto:2261203961@qq.com">点击我跳转</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接标签</title> <!-- href : 必填，表示要跳转到哪个页面? target : 表示窗口能在那里打开? _blank 在标签中打开 _self 在自己网页打开 --> <!-- 锚链接: 1.锚标记: <a id=" "> </a> 2.锚链接: <a herf=""> <herf> --> <!-- 功能性链接: 邮件链接: mailto: --> </head> <!--<a href="#down">回到底部</a><br/><br/>--> <a id="top">回到顶部</a><br/> <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a> <br/> <a href="https://www.baidu.com">点击我跳转百度</a> <br/> <a href="2.标题标签学习.html" target="_self">点击我跳转标签2</a><br/> <p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p> <p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p><p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p><p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p><p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p><p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p><p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p><p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p><p> <img src="../resources/imag/2.jpg" alt="吉林广电大厦" title="吉林广电" width="300" height="400"> </p> <a id="down">底部</a> <a href="#top">回到顶部</a> <a href="mailto:2261203961@qq.com">如何联系我?</a> </body> </html>
7.列表标签
1.什么是列表? 列表就是信息资源的一种展现形式，它可以使信息结构化和条理化，并以列表 的样式显示出来，以便浏览者能更快捷地获得相应地信息。 2.列表的分类: （1）.有序列表(order list) <ol> <li>1<li> <li>1<li> </ol> （2）.无序列表(unorder list) <ul> <li></li> <li></li> <li></li> </ul> （3）.定义列表（definttation list）(defintation title) (defintation describle) <dl> <dt>...</dt> <dd></dd> <dd></dd> </dl>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表学习</title> </head> <body> <!--有序列表(order list)--> <ol> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ol> <hr/> <!--无序列表(unordered list)--> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <hr/> <!--自定义列表 (defintation list) ：标签 (defintation title) :列表名称 dd : 列表内容 --> <dl> <dt>学科</dt> <dd>1</dd> <dd>2</dd> <dd>1</dd> <dt>位置</dt> <dd>1</dd> <dd>1</dd> <dd>1</dd> </dl> </body> </html>
