HTML学习

目录

w3cshool
MDN

HTML是什么？

  • 全称：HyperText Markup Language(超文本标记语言)

HTML标签

<标签名>标签体</标签名>
<标签名>：起始标签
</标签名>：结束标签

  1. 标签 又称 元素，是HTML的基本组成单位

  2. 标签分为：双标签与单标签(绝大多数是双标签)

  3. 标签名不区分大小写，但推荐小写，因为小写更规范

  4. 双标签：<标签名>标签体</标签名>

  5. 单标签：<标签名>

HTML标签属性

  1. 用于给标签提供附加信息

  2. 可以写在：起始标签 或 单标签中

<标签名 属性名=“属性值” 属性名=“属性值”>

  1. 有些特殊的属性，没有属性名，只有属性值

<input disabled>
注意：标签中不要出现同名属性，否则后写的会失效

<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
<html>
  1. 想要呈现在网页中的内容写在 body 标签中
  2. head 标签中的内容不会出现在网页中
  3. head 标签中的 title 可以指定网页中的标题

排版标签

标签名 标签含义 单/双标签
h1~h6 标题 双
p 段落 双
div 没有任何含义，用于整体布局（类似生活中的包装袋） 双

h1 最好写一个，h2~h6能适当多写
h1~h6不能互相嵌套
p 标签和特殊！它里面不能有：h1~h6、p、div标签
标签的语义最重要：用特定的标签去表达特定的含义

块级元素与行内元素

  1. 块级元素：独占一行，内能写行内元素和块级元素
  2. 行内元素：不独占一行，eg: input。内能写行内元素，但是不能写块级元素
  3. 一些特殊的规则：h1~h6不能互相嵌套、p中不要写块级元素

文本标签

用于包裹：词汇、短语等
通常写在排版标签里面
排版标签更宏观（大段文字），文本标签更微观（词汇、短语）
文本标签通常都是行内元素

常用的

标签名 标签语义 单/双标签
em 要着重阅读的内容 双
strong 十分重要的内容（语气比em要更强） 双
span 没有语义，用于包裹短语的通用的容器 双

div是“大包装袋”，span是“小包装袋”

图片标签

标签名 标签语义 常用属性 单/双标签
img 图片 src：图片路径
alt(alternative)：图片描述
width/height：图片宽度/高度，单位是px		 单

src：相对路径、绝对路径：本地绝对路径，网络绝对路径

超链接

标签名 标签语义 常用属性 单/双标签
a 超链接 href：要跳转的具体位置
target：跳转时如何打开页面，
常用的值如下：
_self：在本页签中打开
_blank：在新页签中打开		 双

设置锚点

锚点：网页中的一个标记点
具体的使用方式：

  • 第一步：设置锚点：eg：<p id="test">显示的内容</p>
  • 第二步：跳转锚点：eg：<a href="#test">去test的锚点</a>

<a href="#">回到顶部</a>

列表(可嵌套)

  1. 有序列表：ol：orderd list，li：list items
<ol>
  <li></li>
</ol>
  1. 无序列表：ul：unordered list
<ul>
  <li></li>
</ul>
  1. 自定义列表：dl：definition list，dt：definition title，dd：definition description

术语名称、术语描述(一个 dt 可以对应多个 dd)

<dl>
  <dt></dt>
  <dd></dd>
</dl>

表格

  1. 一个完整的表格：表格标题、表格头部、表格主体、表格脚注
  2. 表格涉及到的标签：
  • table：表格
  • caption：表格标题
  • thead：表格头部
  • tbody：表格主体
  • tfoot：表格脚注
  • tr：每一行
  • th、td：每个单元格，表头用 th，表体和表脚用 td，（td: table data）

rowspan：指定要跨的行数
colspan：指定要跨的列数

常用的标签

标签名 标签含义 单/双标签
br：break 换行 单
hr：horizontal rule 分隔 单
pre：pre + formatted 按原文显示 双

表单

<form action="https://www.baidu.com/s" ,target="_blank">
  <input type="text" name="wd">
  <button>搜索</button>
</form>

<form action="https://search.jd.com/search" target="_blank">
        <label>
            账户：<input id="zhanghu" type="text" name="account" maxlength="10" value="张三">
        </label>
        <br>
        <label>
            密码：<input type="password" name="pwd" maxlength="10">
        </label>
        <br>
        性别：
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female" checked>女
        <br>
        爱好：
        <input type="checkbox" name="hobby" value="smoking">抽烟
        <input type="checkbox" name="hobby" value="drinking">喝酒
        <input type="checkbox" name="hobby" value="perm" checked>烫头
        <br>
        <!-- 文本域 -->
        其他：
        <textarea name="other" cols="23" rows="3"></textarea>
        <br>
        籍贯：
        <select name="place">
            <option value="冀">河北</option>
            <option value="鲁">山东</option>
            <option value="晋" selected>山西</option>
            <option value="粤">广东</option>
        </select>
        <br>
        <!-- 隐藏域 -->
        <input type="hidden" name="tag" value="123">
        <button>确认</button>
        <button type="reset">重置</button>
        <!-- 普通按钮 -->
        <button type="button">检测账户是否被注册</button>
</form>

框架标签

iframe

属性：

  1. name：框架名字，可以与 target 属性配合
  2. width/height：框架的宽/高
  3. frameborder：是否显示边框，值：0或1

iframe 的作用：

  1. 在网页中嵌入广告
  2. 与超链接或表单的 target 配合，展示不同的内容

学习网址

posted @ 2026-07-21 18:45  lbya  阅读(4)  评论(0)    收藏  举报