html学习笔记（1）

1、html基本骨架

复制代码

<html >
<head>
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<title>Document</title> 中的内容是网页标题

2、标签的关系

1、父子关系

2、兄弟关系

3、基本标签

1、标题标签

标签名 h1 - h6

2、段落标签

<p>

显示效果：另起一行，两个段落之间有额外空隙

3、换行标签

<br>

4、水平线标签

<hr>

5、文本格式化标签

<strong> </strong> <b></b> 加粗

<em></em> <i></i> 倾斜

<ins></ins> <u></u> 下划线

<del></del> <s></s> 删除线

strong em ins del 自带强调效果

6、图像标签

7、超链接标签

target = "_blank" 另外打开一个页面

8、音频标签

9、视频标签

controls 显示音频控制面板

loop ：循环播放

autoplay ：自动播放（浏览器默认禁止，只允许在静音下自动播放）

muted ：静音播放

4、列表、表格、表单

1、列表

作用：布局内容排列整齐的区域

分类：无序、有序、定义

1.1 无序列表

复制代码

<ul >
        <li>ceshi leibiao</li>
        <li>cece </li>
        <li> cecec </li>
        <li>cece </li>
</ul>

1.2 有序列表

复制代码

    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>

1.3 定义列表

复制代码

    <dl>
        <dt>定义列表的标题</dt>
        <dd>定义列表的描述/详情</dd>
    </dl>

2、表格

复制代码

    <table border="1">
        <tr>
            <th>表头</th>
            <td>1</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>表头2</td>
            <td>1</td>
            <td>2</td>
        </tr>
    </table>

注：在网页中表格默认没有边框线，使用border 属性可以设置边框先

2.1、表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更加清晰

<thead></thead> 包括tr和td 表示表格头部

<tbody></tbody> 包括tr和td 表示表格主体，主要内容区域

<tfoot></tfoot> 包括tr和td 表示表格底部

2.2、合并单元格

保留左上的单元格，添加属性（取值是属性，表示需要合并的单元格数量）

跨行合并，保留最上的单元格，添加属性rowspan

跨列合并，保留最左的单元格，添加属性colspan

然后删除其他单元格

注：单元格合并不能跨越表格结构标签

3、表单

作用：收集用户信息

使用场景：

登录页面

注册页面

搜索页面

3.1 input 标签

input 标签 type 属性值不同，则功能不同

复制代码

<input type="">
text 文本框，用于输入单行文本
password 密码框
radio  单选框
checkbox 多选框
file  上传文件

placeholder 属性表示占位文本

radio 单选框

name 属性：单选框没有真正的单选，需要设置相同的name来实现单选

checked 默认选中

file 上传文件

multiple 上传文件默认只能选择一个，加属性可以上传多个文件

checkbox 多选框

checked 默认选中

3.2 下拉菜单

复制代码

    <select>
        <option value="">选项1</option>
        <option value="">选项2</option>
        <option value="">选项3</option>
    </select>

selected 属性表示默认选中

3.3 文本域标签

复制代码

    <textarea name="" id="" cols="30" rows="10">提示文字</textarea>

3.4 label 标签

作用：网页中某个标签的说明文本

经验：用label 标签绑定文字和表单控件的关系，增大表单控件的范围

增大点击范围

写法一：

label 标签只包裹内容，不包括表单控件

设置label 标签的for属性和表单控件的id 属性值相同

写法二：

用label标签直接包裹内容和表单控件

复制代码

<input type="radio" name="ceshi" checked id="man"> <label for="man">男</label> 
<label><input type="radio" name="ceshi"> 女 </label>

3.5 按钮 button

复制代码

    <form   action="">
        用户名： <input type="text"> 
        <br>
        密码： <input type="password">

        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>

button 标签 type

button 普通按钮，默认没有功能一般配合javaScript 使用

submit 提交按钮，点击可以将数据提交到后台，type 类型不写，默认属性

reset 重置按钮，点击将填写的数据重置

5、其他

1、布局标签

作用：布局网页（划分网页区域，摆放内容）

div：独占一行

span ：不换行

2、字符实体

作用：在网页中显示预留字符

复制代码

显示结果      描述       实体名称
             空格        &nbsp;
<            小于号      &lt;
>            大于号      &gt;