html5初步学习

向右看齐 2023-02-11 13:29 2阅读 0赞

# HTML5 #

## w3c标准 ##

World Wide Web Consortium（万维网联盟）

### W3C标准包括 ###

*  结构啊标准语言（HTML，XML）
 *  表现标准语言（css）
 *  行为标准语言（DOM，ECMAScript）

## 基本标签 ##

### 图片标签 ###

### 超链接标签 ###

#### 锚链接标签 ####

### 列表 ###

#### 有序列表 ####

#### 无序列表 ####

#### 自定义列表 ####

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

### 表格标签 ###

<table>
        <tr>
        	<td colspan="4">1-1</td>
        </tr>
        <tr>
        	<td rowspan="2">2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <tr>
        	<td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
        </tr>
    </table>

![在这里插入图片描述][20200523224036880.png]

### 视频元素 ###

<video src="" controls autoplay></video>

### 音频元素 ###

<audio src="" controls autoplay></audio>

## 页面结构分析 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIwNzQwMw_size_16_color_FFFFFF_t_70]

## iframe内联框架 ##

<iframe src="www.baidu.com" frameborder="0" width="800px" heigh="800px"></iframe>
    
    <iframe src="" frameborder="0" name="hello" width="800px" heigh="800px"></iframe>
    <a href="www.baidu.com" target="hello">点击跳转到百度</a>

## 表单 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIwNzQwMw_size_16_color_FFFFFF_t_70 1]

### 单选框 ###

<p>性别：
       <input type="radio" value="boy" name="sex" checked disabled/>男
       <input type="radio" value="girl" name="sex"/>女
    </p>

### 多选框 ###

<p>爱好：
       <input type="checkbox" value="sleep" name="hobby"/>睡觉
       <input type="checkbox" value="code" name="hobby"/>敲代码
    </p>

### 下拉框 ###

<p>国家：
        <selsct name="列表名称">
        	<option value="china">中国</option>
            <option value="us" selected>美国</option>
        </selsct>
    </p>

### 表单的应用 ###

隐藏域：hidden

只读：readonly

禁用：disabled

### 表单的验证 ###

提示信息：placeholder

非空判断：required

正则表达式：pattern\# HTML5

[20200523224036880.png]: https://img-blog.csdnimg.cn/20200523224036880.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIwNzQwMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200523224048967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIwNzQwMw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIwNzQwMw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200523224057774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIwNzQwMw==,size_16,color_FFFFFF,t_70