HTML基础标签

目录

1.HTML作用

2.HTML 文件基本结构

3.标签层次结构

 4.HTML常见标签

标题标签: h1-h6

段落标签: p

换行标签: br

格式化标签

图片标签: img

格式化标签

示例代码：

img 标签的其他属性

超链接标签: a

链接的几种形式:

表格标签

列表标签

表单标签

input 标签

label 标签

select 标签

textarea 标签

无语义标签: div & span

---

1.HTML作用

在报纸中可以看到的文档表现形式，用HTML都可以表示出来（排版）

2.HTML 文件基本结构

MDNHTML  W3Cschool

• html 标签是整个 html 文件的根标签(最顶层标签)
• head 标签中写页面的属性.
• body 标签中写的是页面上显示的内容
• title 标签中写的是页面的标题.

3.标签层次结构

• 父子关系
• 兄弟关系

   
       
   
   
      hello world
   

其中 :

• head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
• title 是 head 的子标签. head 是 title 的父标签.
• head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了一个 DOM 树

 4.HTML常见标签

标题标签: h1-h6

有六个, 从 h1 - h6. 数字越大, 则字体越小.

    
这是一个标题h1
    
这是一个标题h2
    
这是一个标题h3
    
这是一个标题h4
    
这是一个标题h5

段落标签: p

• p 标签之间存在一个空隙
• 当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)
• 自动根据浏览器宽度来决定排版.
• html 内容首尾处的换行, 空格均无效.
• 在 html 中文字之间输入的多个空格只相当于一个空格.
• html 中直接输入换行不会真的换行, 而是相当于一个空格.

换行标签: br

• br 是一个单标签(不需要结束标签)
• br 标签不像 p 标签那样带有一个很大的空隙.
• 
  是规范写法. 不建议写成
  

格式化标签

• 加粗: strong 标签 和 b 标签
• 倾斜: em 标签 和 i 标签
• 删除线: del 标签 和 s 标签
• 下划线: ins 标签 和 u 标签

行级标签，块级标签

图片标签: img

img 标签必须带有 src 属性. 表示图片的路径

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中 .

格式化标签

• 加粗 : strong 标签 和 b 标签
• 倾斜 : em 标签 和 i 标签
• 删除线 : del 标签 和 s 标签
• 下划线 : ins 标签 和 u 标签

示例代码：

        strong 加粗

        b 加粗

        倾斜

        倾斜

        删除线

        删除线

        下划线

        下划线

• img 标签的其他属性

• alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
• title: 提示文本. 鼠标放到图片上, 就会有提示.
• width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
• border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定

超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个页面.

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

链接的几种形式:

外部链接: href 引用其他网站的地址

内部链接: 网站内部页面之间的链接. 写相对路径即可 .

百度

表格标签

• table 标签: 表示整个表格
• tr: 表示表格的一行
• td: 表示一个单元格
• th: 表示表头单元格. 会居中加粗
• thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
• tbody: 表格得到主体区域.

    
        
        
        
    
    
        
        
        
    
    
        
        
        
    
姓名
性别
年龄
张三
男
10
李四
女
11

列表标签

主要使用来布局的. 整齐好看.

• 无序列表[重要] ul li , .
• 有序列表[用的不多] ol li
• 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

无序列表

    
咬人猫
    
兔总裁
    
阿叶君

有序列表

    
咬人猫
    
兔总裁
    
阿叶君

自定义列表

    
我的老婆们
    
咬人猫
    
兔总裁
    
阿叶君

表单标签

表单是让用户输入信息的重要途径.

分成两个部分:

• 表单域: 包含表单元素的区域. 重点是 form 标签.
• 表单控件: 输入框, 提交按钮等. 重点是 input 标签

input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

• type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
• name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
• value: input 中的默认值.

• checked: 默认被选中. (用于单选按钮和多选按钮)
• maxlength: 设定最大长度.

1) 文本框

2) 密码框

3) 单选框

注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.

4) 复选框

性别: 
男
女
爱好:
 吃饭  睡觉 
打游戏

5) 普通按钮

当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究).

6) 提交按钮

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

7) 清空按钮

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

男 

select 标签

下拉菜单

option 中定义 selected="selected" 表示默认选中.

    北京
    上海

注意! 可以给的第一个选项, 作为默认选项

    --请选择年份--
    1991
    1992
    1993
    1994
    1995

textarea 标签

无语义标签: div & span

div 标签, division 的缩写, 含义是 分割

span 标签, 含义是跨度

就是两个盒子. 用于网页布局

• div 是独占一行的, 是一个大盒子.
• span 不独占一行, 是一个小盒子.