2. 技术
    3. 难以置信HTML就这点东西

    难以置信HTML就这点东西

    技术2023-04-02  69

    HTML

    一、HTML版本和文件结构二、html5标签1.标题标签2. 段落标签和字符实体3.块标签、含样式的标签4.图片标签5.链接标签6.列表标签7.表格 注：本人用的编辑器为:Sublime Text

    一、HTML版本和文件结构

    html5 的文件结构

    <!--输入!按tab--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的网页</title> </head> <body> 欢迎来到我的网页 </body> </html>

    html1.0的文件结构

    <!--输入html:xt 按tab--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>我的网页</title> </head> <body> 欢迎来到我的网页 </body> </html>

    二、html5标签

    1.标题标签

    有<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,随着数字的变大，在页面中显示的字体越来越小举例:<!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> </body> </html> 效果:

    2. 段落标签和字符实体

    <p></p>: 定义一个文本的段落，默认含有上下间距，段落和段落之间会隔开

    字符实体: &nbsp:空格 &gt:大于号 &lt:小于号

    字符实体的作用: 1）如果网页中想要用多个空格隔开的话，只用键盘敲空格则网页只会显示一个空格，如果要用多个空格，可以是用空格的字符实体让其在网页上显示 2）在网页中显示"<" 和 “>“时会误以为是标签，想要在网页上显示”<” 和">"时可以使用他们的字符实体

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>简介</h1> <!--&nbsp;-空格 - 换行: <br />--> <p>你好呀哈 哈&nbsp;哈哈哈哈<br /> 哈哈哈<br /> hahh </p> <!--大于号:&gt; 小于号: &lt;--> <p>10 &gt; 5</p> <p>5 &lt; 10</p> </body> </html>

    效果:

    3.块标签、含样式的标签

    不含语义的标签: <div>：块标签， 表示一块内容，没有具体的语义<span>: 行内元素，表示一行中的一小段内容，没有具体的语义 含样式和语义的标签: <em>:行内元素， 表示语气中的强调词 有倾斜的样式<i>: 行内元素， 表示专业词汇 有倾斜的样式<b>:行内元素， 表示文档中的关键字或者产品名 有加粗的样式<strong>:行内元素，表示非常重要的内容 有加粗的样式 语义化的标签: 语义化的标签，就是字啊布局的时候多使用有语义的标签，搜索引擎在爬网页的时候能够认识这些标签，理解文档的结构，方便网站的收录。 (语义化的标签不多) 例如 h1：表示标题 p：表示段落 ul、li：表示列表 a：表示链接 dl、dt、dd：表示定义列表 代码举例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块标签</title> </head> <body> <!-- div不带有任何的样式，与p标签的不同时没有格式的，紧挨着的 --> <div> 你好呀哈 哈&nbsp;哈哈哈哈 哈哈哈 hahh </div> <div> 你好呀哈 哈&nbsp;哈哈哈哈 哈哈哈 hahh </div> <div> 你好呀哈 哈&nbsp;哈哈哈哈 哈哈哈 hahh </div> <p> 你好呀哈 哈&nbsp;哈哈哈哈<br /> hahh </p> <p> 你好呀哈 哈&nbsp;哈哈哈哈<br /> hahh </p> <p> 你好呀哈 哈&nbsp;哈哈哈哈<br /> hahh </p> <div> em标签:<em>小柴同学</em><br /> i标签:<i>你好</i><br /> b标签:<b>世界</b><br /> strong标签:<strong>这段文字很重要</strong> </div> </body> </html> 效果:

    4.图片标签

    <img>:标签可以字啊网页上插入一张图片，他是队里使用一个标签的； <img>的属性： src属性：定义图片的引用地址(绝对路径或者相对路径) —>一般用相对路径 alt属性：定义图片加载失败时显示的文字，搜索引擎使用这个文字收录图片、盲人读屏软件会读取这个文字，让盲人来识别图片， 很重要

    5.链接标签

    <a>：可以在网页上定义一个链接地址 <a>属性: href属性：定义跳转的地址 当href="#":链接到页面的顶部 title属性：定义鼠标悬停时弹出的提示文字 target属性：定义连接窗口打开的位置： target="_self" 缺省值，新页面替换原来的页面，在原来的位置打开target="_blank" 新的页面会在新的浏览器窗口打开 实例:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接网页</title> </head> <body> <h1>图片链接</h1> <a href="h16-图片.html">去到图片链接</a> <a href="https://www.baidu.com/" target="_bank">远程链接到百度</a> <!-- target:默认为_self:把这个网页覆盖掉 _bank:新开一个网页 --> <a href="https://www.baidu.com/" title="去到百度" target="_self"> <img src="images/baidu.png" alt="百度图片"> </a> <!-- #代替 链接不写地址，还不知道链接到哪里 也可以链接到顶部 --> <br /> <br /> <br /> <a href="#">缺省链接/链接到底部</a> </body> </html> 效果:

    6.列表标签

    有序列表 在网页上定义一个有编号的内容列表可以用: <ol>、<li>配合使用来实现 ------ 用的比较少 无序列表 再网页上定义一个无编号的内容列表可以使用: <ul>、<li>配合使用来实现 ----- 一般用于新闻 定义列表 定义列表一般用术语定义. <dl>：表示定义列表的整体 <dt>：定义术语的题目 <dd>：定义术语的解释 使用<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <h1>有序列表</h1> <!-- ol>li*3 快捷键写法 按下tab --> <ol> <li>html</li> <li>css</li> <li>javascript</li> </ol> <h1>无序列表</h1> <!-- ul>li*3 快捷键写法 按下tab--> <ul> <li>新闻标题一</li> <li>新闻标题二</li> <li>新闻标题三</li> </ul> <!-- >: 代表子集 --> <!-- ul>(li>a{新闻标题})*3 按下tab --> <ul> <li><a href="">新闻标题一</a></li> <li><a href="">新闻标题二</a></li> <li><a href="">新闻标题三</a></li> </ul> <h1>定义列表</h1> <!-- +:代表是并列的 --> <!-- 快捷键: dl>(dt+dd)*3 --> <dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd> </dl> </body> </html> 效果:

    7.表格

    <table>:声明一个表格 属性 ： border:表格的边框 cellpadding: 单元格内容和边框的距离 cellspacing: 单元格与单元格之间的距离 align:对其方式 left | center | right

    <tr>： 表示表格的一行

    <td>和<th> : 定义一个单元格 td:表示普通单元格， th:表示表头单元格 -> 有 居中和加粗属性 共有的属性: align: 设置表格内容的水平对其方式 left | center | right valign: 设置表格内容的初期对其方式 top | middle | bottom colspan: 单元格的水平合并 rowspan: 单元格的垂直合并

    实例:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <h1 align="center">表格实例</h1> <!-- bgcolor:背景色 <table>:声明一个表格 属性 ： border:表格的边框 cellpadding: 单元格内容和边框的距离 cellspacing: 单元格与单元格之间的距离 align:对其方式 left | center | right <tr>： 表示表格的一行 <td>/<th> : td:表示普通单元格， th:表示表头单元格 -> 有 居中和加粗属性 共有的属性: align: 设置表格内容的水平对其方式 left | center | right valign: 设置表格内容的初期对其方式 top | middle | bottom colspan: 单元格的水平合并 rowspan: 单元格的垂直合并 --> <table border="1" align="center" width="600" height="300"> <tr> <th align="center">1</th> <th align="left">2</th> <th align="right">3</th> </tr> <tr> <td valign="top">1</td> <td valign="bottom">2</td> <td valign="middle">3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> <br /> <br /> <br /> <!-- 实例：快捷键创建 table>(tr>td*5)*6 --> <table border="1" height="300" width="600" align="center"> <tr> <td colspan="6">基本信息</td> </tr> <tr> <td width="15%">姓名</td> <td width="25%"></td> <td width="15%">性别</td> <td width="25%"></td> <td rowspan="5" width="20%"> <img src="images/user.png" alt="人物图片"> </td> </tr> <tr> <td>民族</td> <td></td> <td>出生日期</td> <td></td> </tr> <tr> <td>政治面貌</td> <td></td> <td>健康情况</td> <td></td> </tr> <tr> <td>籍贯</td> <td></td> <td>学历</td> <td></td> </tr> <tr> <td>电子信箱</td> <td></td> <td>联系电话</td> <td></td> </tr> </table> </body> </html>

    效果:

    Processed: 0.017, SQL: 12