HTML

• HyperTextMarkupLanguage： 超文本标记语言

• 超文本： 不仅仅是纯文本还包括字体效果和多媒体（音频视频图片）

• 标记语言特点：

<开始标签 属性名="属性值">标签体</结束标签>

• 作用： 搭建页面结构和内容 ，相当于盖房子（毛坯房）

• 学习HTML主要学习的就是有哪些标签，以及标签的使用方式。

文本相关标签

1. 内容标题： h1-h6

独占一行, 自带上下间距, 字体加粗

1. 换行: br

2. 段落标签p

独占一行, 自带上下间距

1. 水平分割线:hr

2. 加粗b

3. 斜体i

4. 下划线u

5. 删除线s

列表标签

1. 无序列表: ul和 li 组合

2. 有序列表: ol和li组合

3. 列表嵌套: 有序和无序可以任意无限嵌套

图片标签

• src: 资源路径

  • 相对路径:访问站内资源使用

    • 和页面同级目录: 直接写图片名

    • 在页面的上级目录: ../图片名

    • 在页面的下级目录: 文件夹名/图片名

  • 绝对路径:访问站外资源使用, 称为图片盗链,有找不到图片的风险

• alt: 当图片不能正常显示时显示的文本

• title:图片标题 当鼠标悬停时显示的文本

• width/height:设置宽高, 只设置宽度高度会自动等比例缩放, 两种赋值方式:1.像素 2.百分比

超链接a

• href: 作用类似图片标签的src

• a标签包裹文本为文本超链接 , 包裹图片为图片超链接

• 页面内部跳转, 在目的地元素里面添加id属性, 然后在超链接的href属性中写#id 这样点击时就可以跳转到目的地元素的位置

表格标签table

• 相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题

• 相关属性:border 边框 colspan跨列 rowspan跨行

表单form

• 作用: 获取用户输入的内容并提交给服务器

• 学习表单主要学习的就是表单中有哪些控件, 包括:文本框,密码框,单选,多选,下拉选,日期,文件等

• 相关代码:

<form action="http://www.baidu.com">
    <!--placeholder占位文本
    maxlength最大字符长度
    value设置控件的值
    readonly只读-->
    用户名:<input type="text" name="username" maxlength="5" value="tom"
               readonly placeholder="请输入用户名"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    <!--value设置提交的值,如果不设置则提交on checked设置默认选中-->
    性别:<input type="radio" name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w" id="r2">
    <label for="r2">女</label><br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <select name="city">
        <!--value设置提交的内容,如果不写则提交标签体的内容
        selected设置默认选中-->
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
    </select><br>
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset" value="重置按钮">
    <!--自定义按钮-->
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">注册</button>
    <button type="reset">重置按钮</button>
    <button type="button">自定义按钮</button>
</form>

分区标签

• 作用: 可以理解为一个容器, 对多个有相关性的标签进行统一管理

• 常见的分区标签包括:

  • div: 独占一行

  • span: 共占一行

• HTML5标准中新增的专门用于做页面布局的分区标签作用和div一样都是独占一行的:

  • header 头

  • main 主体

  • footer 脚

  • section 区域

  • nav 导航