掌握HTML核心技能，轻松构建网页基石

发表时间: 2024-03-08 19:23

基础结构

123456789101112131415161718192021222324252627282930313233343536373839404142

<!--   1. html文件的根标签 <html></html> 所有的其他标签都要在这个标签中间  2. html根标签下有两个一级子标签    <head></head> 头标签 定义那些不直接展示在页面主体上，但是又很重要的内容                        1. 字符集 <meta charset="UTF-8" /> 告诉浏览器用什么字符集对文件解码                        2. css引入                        3. js引入                        4. ......    <body></body> 体标签                   1. 定义直接展示在页面主体上的内容  3. 专业词汇    标签 tag       页面的一对<>    属性 attribute 对标签特征进行设置的一种方式 属性一般在开始标签中定义    文本 text      双标签中间的文字    元素 element   开始标签+属性+文本+结束标签 称之为一个元素  4. 更多的语法细节      1. 根标签有且只能有一个      2. 无论是双标签还是单标签都需要正确关闭      3. 标签可以嵌套但不能交叉嵌套      4. 注释语法为<!-－--〉,注意不能嵌套      5. 属性必须有值，值必须加引|号，H5中属性名和值相同时可以省略属性值      6. HTML中不严格区分字符串使用单双引|号      7. HTML标签不严格区分大小写，但是不能大小写混用      8. HTML中不允许自定义标签名，强行自定义则无效--><!DOCTYPE html><HTML><head>  <title>第一个页面</title>  <meta charset="UTF-8" /></head><body>  <h1>杭州亚运会丨精彩亚运盛会，他们共同期待</h1>  <input type='password' />  <big><i>张三</i></big>  <xxx>李四</xxx></body></HTML>

常见标签

标题段落换行

12345678910111213141516171819202122232425262728293031323334

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <!--   标题标签  h1-h6  段落      p  换行      br hr -->  <h1>世界杯-塞尔维亚男篮大胜立陶宛进4强博格丹21分</h1>  <h2>世界杯-塞尔维亚男篮大胜立陶宛进4强博格丹21分</h2>  <h3>世界杯-塞尔维亚男篮大胜立陶宛进4强博格丹21分</h3>  <h4>世界杯-塞尔维亚男篮大胜立陶宛进4强博格丹21分</h4>  <h5>世界杯-塞尔维亚男篮大胜立陶宛进4强博格丹21分</h5>  <h6>世界杯-塞尔维亚男篮大胜立陶宛进4强博格丹21分</h6>  <p>    塞尔维亚：博格丹21分4篮板3助攻、米卢蒂诺夫9分5篮板3助攻、古德里奇10分2篮板2助攻，<br />    佩特鲁舍夫15分6篮板2助攻。  </p>  <br><br><br><br>  <hr>  <p>    立陶宛：瓦兰丘纳斯11分5篮板、约库巴伊蒂斯11分8助攻、布拉兹代基斯10分4篮板、塞德克斯基斯5分3篮板3助攻。  </p></body></html>

有序和无序列表

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <!--     有序列表  ol    无序列表  ul    列表项    li    -->  <!-- 有序 -->  <ol>    <li>数据类型</li>    <li>变量</li>    <li>流程控制</li>    <li>函数</li>    <li>面向对象</li>  </ol>  <!-- 无序 -->  <ul>    <li>Java</li>    <li>C</li>    <li>Python</li>  </ul>  <!-- 嵌套 -->  <ul>    <li>Java      <ol>        <li>数据类型</li>        <li>变量</li>        <li>流程控制</li>        <li>函数</li>        <li>面向对象</li>      </ol>    </li>    <li>C</li>    <li>Python</li>  </ul></body></html>

超链接标签

1234567891011121314151617181920212223242526272829303132333435

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <!--     超链接      a标签        herf 用于定义要跳转的目标资源的地址          1. 完整的URL地址 https://bxin.top          2. 相对路径 以当前资源的所在路径为出发点去找目标资源                      ./ 表示当前资源的所在路径，可以省略不写                      ../ 表示当前资源的上一层          3. 绝对路径 以/开头        target  用于定义目标资源的打开方式          _self  默认值 在当前窗口打开          _blank 在新窗口打开          _parent 在父窗口打开          _top 在顶层窗口打开   -->  <a href="https://bxin.top" target="_blank">PinHsin</a>  <!-- 相对路径写法 -->  <a href="02标题段落换行.html" target="_blank">02标题标签</a>  <a href="a/test.html" target="_blank">test</a>  <!-- 绝对路径写法 -->  <a href="/HTML/a/test.html" target="_blank">test</a></body></html>

图片标签

1234567891011121314151617181920212223242526

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <!--   img    src 定义图片的路径      1. url      2. 相对路径      3. 绝对路径    title 定义鼠标悬停时提示的文字    alt 定义图片加载失败时提示文字 -->  <img src="img/head.jpg" width="300px" title="头像" alt="">  <img src="/HTML/img/head.jpg" width="300px" title="head" alt="">  <img src="img/headz.jpg" width="300px" title="头像" alt="加载失败"></body></html>

表格标签

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <!--     table 整张表格      thead 表头      tbody 表体      tfoot 表尾        tr  表格中的一行          td  行中的一个单元格          th  自带加粗居中效果的td   -->  <h3 style="text-align:center;">员工技能竞赛评分表</h3>  <table border="1px" style="margin: 0px auto;width: 400px;">    <thead>      <tr>        <th>排名</th>        <th>姓名</th>        <th>分数</th>        <th>备注</th>      </tr>    </thead>    <tbody>      <tr>        <td>1</td>        <td>张小明</td>        <td>100</td>        <td rowspan="6">          前三名升职加薪        </td>      </tr>      <tr>        <td>2</td>        <td>李小黑</td>        <td>99</td>      </tr>      <tr>        <td>3</td>        <td>王小董</td>        <td>92</td>      </tr>      <tr>        <td>总人数</td>        <td colspan="2">2000</td>      </tr>      <tr>        <td>平均分</td>        <td colspan="2">90</td>      </tr>      <tr>        <td>及格率</td>        <td colspan="2">80%</td>      </tr>    </tbody>    <!-- <tfoot>      <tr>        <td>总计</td>        <td>291</td>        <td></td>      </tr>    </tfoot> -->  </table></body></html>

表单标签

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body>  <!--     form  表单标签      action  定义数据的提交地址        1. url        2. 相对路径        3. 绝对路径      methon  定义数据的提交方式        GET          1. 参数会以键值对的形式放在url后提交 url?key=value&key=value          2. 数据暴露在地址栏上，相对不安全          3. 地址栏有限制，提交的数据量不大          4. 只能是字符，不能提交文件          5. 效率较高        POST          1. 参数默认不放到url后          2. 数据不会直接暴露在地址栏上，相对安全          3. 数据单独打包通过请求体发送，提交的数据量比较大          4. 请求体中可以是字符，也可以是字节，可以提交文件          5. 效率较低          表单项标签    表单项标签一定要定义name属性，用于明确提交时的参数名    表单项标签还需要定义value属性，用于明确提交时的实参    input      type 输入信息的表单项类型      password 密码框      submit  提交按钮      reset 重置按钮      radio 单选框  多个选项选其一            多个单选框使用相同的name属性值，则就会有互斥效果      checkbox 复选框 多个选项选多个      hidden  隐藏域  不展示在页面上，提交时会携带      file  文件上传框    textarea 文本域，多行文本框    select 下拉框      option 选项       -->  <form action="08welcome.html" method="GET">    <!-- 添加表单项标签 -->    用户名：<input type="text" name="username"> <br>    密码：<input type="password" name="password"> <br>    性别：    <input type="radio" name="gender" value="1" checked>男    <input type="radio" name="gender" value="0">女    <br>    爱好：    <input type="checkbox" name="hobby" value="1" checked>旅游    <input type="checkbox" name="hobby" value="2">登山    <input type="checkbox" name="hobby" value="3">健身    <input type="checkbox" name="hobby" value="4">上网    <br>    <input type="hidden" name="id" value="100">    <!--       readonly  只读，提交时携带      disabled  不可用，提交时不携带     -->    <input type="text" name="pid" value="200" readonly>    <input type="text" name="tid" value="200" disabled>    <br>    个人简介：<textarea name="intro" style="width: 300px; height: 100px;"></textarea>    <br>    籍贯：    <select name="address">      <option value="1">北京</option>      <option value="2">上海</option>      <option value="3">广州</option>      <option value="0" selected>-请选择-</option>    </select>    <br>    选择头像    <input type="file" name="photo">    <br>    <input type="submit" value="登录">    <input type="reset" value="清空">  </form></body></html>

布局相关

1234567891011121314151617181920212223242526272829303132333435

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title></head><body style="background-color: cadetblue;">  <!--   css 设置样式    通过元素的style属性进行设置    style="样式名:样式值;样式名:样式值;......."  块元素  自己独占一行的元素 块元素的CSS样式的宽 高等等 往往都是生效的    div  行元素  不会自己独占一行的元素 CSS样式的宽 高等等 往往都是不生效的    span -->  <div style="border:1px solid red;width: 500px;height: 200px; margin: 10px auto; background-color: aliceblue;">123  </div>  <div style="border:1px solid red;width: 500px;height: 200px; margin: 10px auto; background-color: antiquewhite;">456  </div>  <div style="border:1px solid red;width: 500px;height: 200px; margin: 10px auto; background-color: aquamarine;">    北京时间2月25日，男篮亚预赛第二场，中国男篮客场以73-76不敌日本男篮。    男篮开场一度14-3领先被打了一波11-0，上半场打完两队38平，第三节打完日本领先4分，    末节还剩1分09秒胡明轩致命失误送霍金森暴扣拉开到5分，<span style="font-size: 30px;">程帅澎</span>续命三分，比江岛慎两罚一中，    朱俊龙绝平三分不中。  </div>  <span style="border:1px solid green;width: 500px;height: 200px; margin: 10px auto;">555</span></body></html>

特殊符号

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>JavaWeb Study Demo</title></head><body>  <ol>    <ul>      <li>基础结构        <ol>          <li>            <a href="/HTML/01firstPage.html">firstPage</a>          </li>        </ol>      </li>      <li>常见标签        <ol>          <li>            <a href="/HTML/02标题段落换行.html">标题段落换行</a>          </li>          <li>            <a href="/HTML/03有序和无序列表.html">有序和无序列表</a>          </li>          <li>            <a href="/HTML/04超链接.html">超链接</a>          </li>          <li>            <a href="/HTML/05图片.html">图片</a>          </li>          <li>            <a href="/HTML/06表格标签.html">表格</a>          </li>          <li>            <a href="/HTML/07表单.html">表单</a>          </li>          <li>            <a href="/HTML/09布局.html">布局</a>          </li>          <li>            <a href="/HTML/10特殊字符.html">特殊字符</a>          </li>        </ol>      </li>    </ul>  </ol></body></html>

掌握HTML核心技能，轻松构建网页基石

基础结构

常见标签

标题段落换行

有序和无序列表

超链接标签

图片标签

表格标签

表单标签

布局相关

特殊符号

热门阅读

推荐阅读