博客已迁移至自建网站,此博客已废弃.
请移步至:https://blog.ours1984.top/posts/bgbg/欢迎大家访问

一个页面就是一个html文档，大家不要学傻了。css/js通过标签以元素的属性寄生在在html文档中

元素和标签

在 HTML 中，标签（tag）通常又被称作元素（element）。例如 <a> 标签又叫做 <a> 元素，<p> 标签也叫作 <p> 元素。HTML 元素根据其表现形式可以分为 2 种：块级元素,行内元素;任何 HTML 元素都属于这两者中的任意一种。

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表：

块级元素说明
div最典型的块元素
p表示段落
h1-h6表示1-6级标题（默认加粗）
br表示换行
ol有序列表
ul无序列表

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：

行内元素说明
a超链接
span常用行级
strong加粗，强调
b加粗，不强调
em斜体，强调
i斜体，不强调
img图片
input输入框
select下拉列表

HTML 中的各个元素之间是可以互相嵌套的

  • 块元素可以嵌套块元素
  • 块元素可以嵌套行内元素
  • 行内元素可以嵌套行内元素
  • 行内元素可以嵌套块元素

块级元素的宽度是 100%，在浏览器中默认独占一行。
行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
块级元素内部可以嵌套块级元素或行内元素。
建议行内元素里面只嵌套行内元素。

元素的属性

通用属性

几乎所有元素都拥有的属性

id:用于表示页面中唯一元素,唯一性自己保证

class:推荐使用,几乎只用它,用于表示一类元素

  • css:样式复用,class天生具备了样式复用的特征

style:某一个元素样式,直接写在标签里,权重大于外部样式

预置属性

通用属性子集,id/class/style也是预置属性,只不过几乎所有元素都会有

比如a标签的预置属性:href
比如img标签的预置属性:src,alt

事件属性

有一个通用前缀:on+事件名称:事件属性
比如<button onclick="alert('提交成功')">提交</button>

自定义属性

有一个通用前缀:”data-“，可用于保存数据
比如<div data-user-email="498668472@qq.com">我的邮箱是:</div>

语义化布局

id:权重过大,尽量少用或不用
id:主要用在表单元素，锚点

所以出现了语义化布局元素

  • herder标签：相当于div标签属性为header
  • main标签：相当于div标签属性为main
  • footer标签：相当于div标签属性为footer
  1.   <div class="header">header</div>
  2.   <div class="main">main</div>
  3.   <div class="footer">footer</div>
  5.   <hr>
  7.   <!-- html5: 语义化布局元素 -->
  8.   <header>header</header>
  9.   <main>main</main>
  10.   <footer>footer</footer>

为什么还是有大量的开发都, 喜欢用 div + class 模式, 不用语义化布局标签?

  1. 目前项目90%以上是基于移动端的，不在乎不依赖搜索引擎优化，seo
  2. 语义化标签还是数量太少了，不如用class描述更精准

常用标签

图片是外部资源，通过标签引入到当前html中，通常使用“单标签”

列表：相同元素集合，单列多行。ul+li无序列表，il+li有序列表

图片链接：通常不会单独使用，而是与其他元素，如列表组合使用

自定义列表：类似map的键值对，dl开启一个自定义列表，dt相当于key，dd相当于value

  1.   <img src="/images/bear.jpg" alt="图片说明" width="200">
  2.   <a href="/images/download.zip" target="_blank">下载附件</a>
  3.   <a href="https://blog.ours1984.top/" target="_self">网页跳转</a>
  4.   <a href="mailto:xxxx.com" target="_self">发邮件</a>
  5.   <!-- 无序列表 -->
  6.   <ui>
  7.       <li><a href="">item</a></li>
  8.       <li><a href="">item</a></li>
  9.       <li><a href="">item</a></li>
  10.   </ui>
  11.   <!-- 有序列表 -->
  12.   <ol>
  13.       <li><a href="">item</a></li>
  14.       <li><a href="">item</a></li>
  15.       <li><a href="">item</a></li>
  16.   </ol>
  17.   <!-- 自定义列表 -->
  18.   <dl>
  19.       <dt>地址:</dt>
  20.       <dd>合肥市政务新区</dd>
  21.       <dt>email1:</dt>
  22.       <dd>admin@php.cn</dd>
  23.       <dd>498448472@qq.cn</dd>
  24.   </dl>

表格的合并单元格

table标签开启一个表格，width属性指定宽度，border属性指定表格线宽度

caption：标题
thead：表头（可选）
th:预置了居中和加粗的tr
tbody：表体
tfoot：表尾（可选）

tr：行，必须先画行，在一行中划分列（单元格）
td：单元格。colspan属性：水平合并，rowspan属性：垂直合并。合并后注意个数布局

  1.   <table width="500" border="1">
  2.     <!-- 标题 -->
  3.     <!-- <div class="caption">标题</div> -->
  4.     <caption>
  5.       表格标题
  6.     </caption>
  8.     <!-- 表头: 可选 -->
  9.     <thead>
  10.       <tr bgcolor="lightgreen">
  11.         <!-- <td style="text-align: center;font-weight:bold">xxx</td>
  12.              <td style="text-align: center;font-weight:bold">xxx</td>
  13.              <td style="text-align: center;font-weight:bold">xxx</td>
  14.              <td style="text-align: center;font-weight:bold">xxx</td> -->
  16.         <!-- th: 预置了style="text-align: center;font-weight:bold"的td标签 -->
  17.         <th>xxx</th>
  18.         <th>xxx</th>
  19.         <th>xxx</th>
  20.         <th>xxx</th>
  21.       </tr>
  22.     </thead>
  24.     <!-- 表格中的数据必须放在"单元格"中 -->
  25.     <!-- tbody: 必选 -->
  26.     <tbody>
  27.       <!-- tr: 行, 必须先画行, 在一行中划分列(单元格) -->
  28.       <tr>
  29.         <td>xxx</td>
  30.         <!-- ! 水平方向合并: colspan -->
  31.         <!-- col:列, span: 跨越,合并 -->
  32.         <td colspan="3" bgcolor="yellow">xxx</td>
  33.         <!-- <td>xxx</td>
  34.           <td>xxx</td> -->
  35.       </tr>
  36.       <tr>
  37.         <td>xxx</td>
  38.         <td>xxx</td>
  39.         <td>xxx</td>
  40.         <td>xxx</td>
  41.       </tr>
  43.       <!-- rowspan: 垂直方向 -->
  44.       <tr>
  45.         <td>xxx</td>
  46.         <!-- * 从第3行第2列开始,向下/垂直合并3行/单元格 -->
  47.         <td rowspan="3" bgcolor="cyan">xxx</td>
  48.         <td>xxx</td>
  49.         <td>xxx</td>
  50.       </tr>
  51.       <tr>
  52.         <td>xxx</td>
  53.         <!-- <td>xxx</td> -->
  54.         <td>xxx</td>
  55.         <td>xxx</td>
  56.       </tr>
  57.       <tr>
  58.         <td>xxx</td>
  59.         <!-- <td>xxx</td> -->
  60.         <td>xxx</td>
  61.         <td>xxx</td>
  62.       </tr>
  63.     </tbody>
  65.     <!-- 表尾: 可选  -->
  66.     <tfoot>
  67.       <tr>
  68.         <td colspan="4" bgcolor="lightblue">xxx</td>
  69.         <!-- <td>xxx</td>
  70.           <td>xxx</td>
  71.           <td>xxx</td> -->
  72.       </tr>
  73.     </tfoot>
  74.   </table>

课程表示例

  1.     <table border="1">
  2.         <caption>大学课表</caption>
  3.         <tbody>
  4.             <tr>
  5.                 <td rowspan="2">学历层次</td>
  6.                 <td rowspan="2">主考院校</td>
  7.                 <td rowspan="2">专业名称</td>
  8.                 <td colspan="2" align="center">星期六</td>
  9.                 <td colspan="2" align="center">星期日</td>
  10.             </tr>
  11.             <tr>
  12.                 <td align="center">上午</td>
  13.                 <td align="center">下午</td>
  14.                 <td align="center">上午</td>
  15.                 <td align="center">下午</td>
  16.             </tr>
  17.             <tr>
  18.                 <td colspan="3" rowspan="2" align="center">公共课</td>
  19.                 <td>马克思主义基本原理概论 <br> 政治经济学</td>
  20.                 <td>教育学</td>
  21.                 <td>中国近代史纲要<br>大学语文</td>
  22.                 <td>英语（一）<br>英语（二）</td>
  23.             </tr>
  24.             <tr>
  25.                 <td>复变函数与积分变换 <br> 概率论数理统计</td>
  26.                 <td>高等数学（一）<br>高等舒徐（专科）</td>
  27.                 <td>线性代数</td>
  28.                 <td>大学物理<br>物理</td>
  29.             </tr>
  30.             <tr>
  31.                 <td colspan="3" align="center">经济类课程</td>
  32.                 <td></td>
  33.                 <td>国民经济统计概论<br>管理学原理</td>
  34.                 <td>基础跨级学</td>
  35.                 <td>经济法概论<br>管理系统中计算机应用</td>
  36.             </tr>
  37.             <tr>
  38.                 <td align="center">专科</td>
  39.                 <td align="center">新疆财经<br>大学</td>
  40.                 <td align="center">工商企业管理</td>
  41.                 <td>市场营销学<br> 人力资源管理<br>国际贸易实务</td>
  42.                 <td>中国税制<br>国际经济法概论</td>
  43.                 <td>生产与作业管理<br>政府与事业单位<br>刑事诉讼法</td>
  44.                 <td>市政学<br>公共关系学</td>
  45.             </tr>
  46.         </tbody>
  47.     </table>

效果如下

导航栏示例

  1.     <style>
  2.         .a {
  3.             width: 205px;
  4.         }
  6.         .b {
  7.             width: 200px;
  8.             height: 50px;
  9.             background-color: limegreen;
  10.             text-align: center;
  12.             line-height: 50px;
  13.             color: #ffffff;
  14.         }
  16.         .c {
  17.             width: 200px;
  18.             height: 300px;
  19.             background-color: gainsboro;
  20.             display: none;
  22.             /*visibility: hidden;*/
  23.         }
  25.         .d {
  26.             list-style: none;
  27.             margin-left: -40px;
  28.         }
  30.         .e {
  31.             line-height: 50px;
  32.             display: block;
  34.             width: 200px;
  35.             text-align: center;
  36.         }
  38.         .a:hover {
  39.             cursor: pointer;
  40.         }
  42.         .a:hover .c {
  43.             display: block;
  44.         }
  46.         .a:hover .b {
  47.             background-color: green;
  48.         }
  50.         .e:hover {
  51.             background-color: gray;
  52.             color: #FFFFFF;
  53.         }
  54.     </style>
  55.     <div class="a">
  56.         <div class="b">ours1984导航</div>
  57.         <div class="c">
  58.             <ul class="d">
  59.                 <li class="e">
  60.                     <a href="https://blog.ours1984.top/" target="_blank">
  61.                         <img src="/images/bear.jpg" alt="主页" width="100">
  62.                     </a>
  63.                 </li>
  64.                 <li class="e">
  65.                     <a href="https://blog.ours1984.top/archives/" target="_blank">
  66.                         <img src="/images/dog.jpg" alt="归档" width="100">
  67.                     </a>
  68.                 </li>
  69.                 <li class="e">
  70.                     <a href="hhttps://blog.ours1984.top/posts/xnzywl/" target="_blank">
  71.                         <img src="/images/duck.jpg" alt="VPN" width="100">
  72.                     </a>
  73.                 </li>
  74.             </ul>
  75.         </div>
  76.     </div>

效果如下

附录:HTML标签的英文全称以及含义

HTML标签英文全称中文释义
aAnchor锚(定义超链接，用于从一张页面链接到另一张页面)
abbrAbbreviation缩写词
acronymAcronym取首字母的缩写词
addressAddress地址
altalter替用(一般是图片显示不出的提示)
bBold粗体（文本）
bdoDirectionof Text Display 文本显示方向
bigBig变大（文本）
blockquoteBlockQuotation 区块引用语
brBreak换行
cellcell巢
cellpaddingcellpadding巢补白
cellspacingcellspacing巢空间
centerCentered居中（文本）
citeCitation引用
codeCode源代码（文本）
ddDefinitionDescription 定义描述
delDeleted删除（的文本）
dfnDefinesa Definition Term 定义定义条目
divDivision分隔
dlDefinitionList 定义列表
dtDefinitionTerm 定义术语
emEmphasized加重（文本）
fontFont字体
h1~h6Header1 to Header 6 标题1到标题6
hrHorizontalRule 水平尺
hrefhypertextreference 超文本引用
iItalic斜体（文本）
iframeInlineframe 定义内联框架
insInserted插入（的文本）
kbdKeyboard键盘（文本）
liListItem 列表项目
nlnavigationlists 导航列表
olOrderedList 排序列表
optgroupOptiongroup 定义选项组
pParagraph段落
prePreformatted预定义格式（文本 ）
qQuotation引用语
relReload加载
s/strikeStrikethrough 删除线
sampSample示例（文本
smallSmall变小（文本）
spanSpan范围
srcSource源文件链接
strongStrong加重（文本）
subSubscripted下标（文本）
supSuperscripted上标（文本）
tdtabledata cell 表格中的一个单元格
thtableheader cell 表格中的表头
trtablerow 表格中的一行
ttTeletype打印机（文本）
uUnderlined下划线（文本）
ulUnorderedList 不排序列表
varVariable变量（文本）

更多相关文章

  1. HTML基础：HTML的图片、链接、列表、表格标签属性及使用案例/用表
  2. 使用HTML标签制作简单的导航和课程表
  3. HTML常用标签属性以及应用场景/怎么用表格做一个课程表
  4. HTML课堂笔记-0704
  5. android:name 的秘密
  6. android的 UI 布局总结
  7. android pull解析
  8. Android常用布局类整理(一)
  9. android 在布局文件中报错:This text field does not specify an

随机推荐

  1. [置顶] SQL Server 日期相关
  2. 2017年末大数据Linux,Oracle,MySQL,J2EE(
  3. [置顶] mysql七表查询实例（二）
  4. VFP+SQL Server 2000怎样进行数据库备份
  5. TSQL左连接多个右手行
  6. 每条sql语句实际上都是一个事物（事物多种
  7. [SQL Server 2005 至 SP3] 问题解决: 发
  8. MySQL中的字符串模式匹配
  9. sql 语句 更改默认的sql server 数据库
  10. mysql中如何对text字段值进行追加更新