HTML浓缩版入门笔记

标签

网页标签

1. DOCTYPE：告诉浏览器，我们要使用什么规范

2. head：代表网页头部

3. meta：描述性标签，用来描述网站的一些信息，meta一般用来做SEO

4. title：网页标题

5. body：代表网页主体

基本标签

1. 标题标签：h1、h2.....数字表示几级，1级最大

2. 段落标签：p

3. 换行标签：br/（自闭合标签）

4. 水平线标签：hr/（自闭合标签）

5. 注释：<!-- -->快捷键ctrl+/

6. 粗体：strong

7. 斜体：em

8. 容器标签:div、span 作用:

   1. 结构化

   2. 绑定操作

9. 特殊符号标签：&...

&nbsp：空格

&copy：圈C

&gt:大于

&lt:小于

图像标签

1. img：图像标签

2. src：图像标签中的必填项，表示图片位置

3. 地址分为相对地址和绝对地址，推荐使用相对地址

4. ../：上一级目录

5. alt:图片占位符（图片名字）（必填）

6. title:图片提示符

链接标签

1. a:链接标签 功能：

   1. 超链接

   2. 锚点

   3. 打电话

   4. 协议限定符

2. herf：表示要跳转到那个页面（在a标签中必填）

3. target：表示窗口在哪里打开

4. _blank：在新标签中打开

5. _self：在自己的网页中开发

6. 锚链接：需要一个锚标记，再跳转到标记 用法（例）：<a name="top">顶部</a>

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

7. 功能性链接：

   邮件链接：mailto：邮箱

   电话连接：tel：电话

   用法（例）：<a href="mailto:1062276560@qq.com">点击联系我</a>

列表标签

1. 有序列表：ol；用法：`

   <ol>
       <li>java</li>
       <li>python</li>
       <li>运维</li>
       <li>前端</li>
       <li>C</li>
   </ol>

   `

2. 无序列表：ul；用法：`

   <ul>
       <li>java</li>
       <li>python</li>
       <li>运维</li>
       <li>前端</li>
       <li>C</li>
   </ul>

   `

3. 自定义列表：dl;用法：`

   <dl>
       <dt>学科</dt>
       <dd>java</dd>
       <dd>python</dd>
       <dd>linux</dd>
       <dd>C</dd>
       
   </dl>

   `

表格标签

1. table:表格

2. tr:行

3. td:列

4. border:边框（废弃特性）用法：<table border="1px">

   跨行跨列用法：

   跨行（例）：

   <td rowspan="2">2-1</td>

   跨列（例）：

   <td colspan="4">1-1</td>

列表用法（例）:

<table border="1px">
    <tr>
<!--        colspan 跨列-->
        <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>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
​
</table>

媒体元素

音频和视频：audio和video;

1. src：同上，是音视频的路径

2. controls：控制条

3. autoplay：自动播放

行元素和块元素

1. 块元素：无论内容多少，该元素独占一行（p,h1-h6...)

2. 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a,strong,em...)

页面结构分析

1. header：标题头部区域的内容（用于页面或页面中的一块区域）

2. footer：标记脚部区域的内容（用于整个页面或页面的一块区域）

3. section：Web页面中的一块独立区域

4. article：独立的文章内容

5. aside：相关内容或应用（常用于侧边栏）

6. nav：导航类辅助内容

7. code：代码部分

内联框架

iframe：在一个网站中嵌入另一个网站

用法（例）：<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="300px" height="300px"></iframe>

表单语法

1. form：表单

2. action：表单的提交位置，可以是网站，也可以是一个请求处理地址

3. post，get：表单的两种提交方式

   get方式提交：我们可以在url中看到我们提交的信息，不安全，高效

   post：比较安全，传输大文件；

   用法（例）：

   <form action="1.我的第一个网页.html"method="get"></form>

4. input:输入框；用法（例）：<p>密码：<input type="password" name="pwd"></p>

表单元素格式

1. type（必填）：指定元素的类型。text、password、CheckBox、radio、submit、reset、file、hidden、image、button，默认为test。

   单选框：radio，要实现单选，必须让多个单选框有同一个名字

   （例）：

   <input type="radio" value="boy"name="gender"/>男
   <input type="radio" value="girl"name="gender"/>女

   多选框：checkbox，也是尽量让多选框有名字name

   （例）：

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

   按钮：button（普通按钮），用法(例)：

   <input type="button"name="btn1"value="点击变长">

   图像按钮：image（例）<input type="image"src="resource/image/bilgewater-bilgewater-bay.jpg">

   提交按钮、重置按钮：submit，reset；用法（例）：

   <input type="submit">
   <input type="reset">

   下拉框，列表框：select，用法（例）：

   <p>
       国籍：
       <select name="列表名称">
           <option value="China">中国</option>
           <option value="America">美国</option>
           <option value="Eth"selected>瑞士</option>
           <option value="England">英国</option>
       </select>
   </p>

   文本域：textarea，用法（例）：

   <p>
       反馈：
       <textarea name="textarea"  cols="30" rows="5">文本内容</textarea>
   </p>

   文件域:file,用法（例）：

   <p>
       <input type="file" name="files">
   </p>

   搜索框滑块和简单验证:

   邮件验证：email；用法（例）：

   <p>
       邮箱:
       <input type="email"name="email">
   </p>

   URL验证（网址）：用法（例）：

   <p>
       URL:
       <input type="url"name="url">
   </p>

   数字验证：<input type="number"name="number"max="100"min="0" step="10">

   滑块：range；用法（例）：

   <p>音量：
       <input type="range"name="voice" min="0"max="100"step="2">
   </p>

   搜索框：search；用法（例）：

   <p>
       搜索：
       <input type="search" name="search">
   </p>

2. name（必填）：指定表单元素的名称

3. value：元素的初始值。type为radio（单选框）时必须指定一个值

4. size：指定表单元素的初始宽度。当type为test或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

5. maxlength：type为test或password时，输入的最大字符数

6. checked：type为radio或CheckBox时，指定按钮是否被选中

表单的应用

1. 只读：readonly；用法（例）:

   ​

   名字：

   ​

2. 禁用：disabled;用法（例）：

   <input type="radio" value="boy"name="gender" disabled/>男
   <input type="radio" value="girl"name="gender"/>女

3. 隐藏域 ：hidden；用法（例）：

   <p>密码：<input type="password" name="pwd" hidden></p

4. 增强鼠标可用性：label：指向一个位置，与id连用，用法（例）：

   <p>
       <label for="mark">你点我试试</label>
       <input type="text"id="mark">
   </p>

表单初级验证

常用方式：placeholder，required，pattern

1. placeholder：提示信息;用法（例）：

<p>名字：<input type="text" name="username"placeholder="请输入用户名"></p>

1. required：非空判断；用法（例）：

   <p>名字：<input type="text" name="username"placeholder="请输入用户名"required></p>

2. pattern：正则表达式：自定义正则表达式进行验证。（百度查找）