HTML页面制作标签学习

HTML

1.快速入门：

语法

1. html文档后缀名.heml或者.htm

2. 标签分为

   1. 围堵标签：有开始标签和结束标签。如< html>< /html>
   2. 自闭和标签：开始标签和结束标签在一起。如< br/>

3. 标签可以嵌套：

   需要正确嵌套，不能你中有我，我中有你

   错误：< a>< b>< /a>< /b>

   正确：< a>< b>< /b>< /a>

4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可）引起来

5. html的标签不区分大小写，建议使用小写。

2.标签学习

1. 文件标签：构成html最基本的标签

   • < html>:html文档的根标签

   • < head>:头标签。用于指定html文档的一些属性。引入外部资源

   • < title>:标题标签

   • < body>:体标签

   • < !DOCTYPE html> :html5中定义该文档是html文档

     < meta charset=“utf-8”>

2. 文本标签：

   • 注释：< !–注释内容–>
   • < h1>to < h6>:标题标签
   • < p>:段落标签
   • < br/>:换行标签
   • < hr/>:一条水平线
   • < b>:字体加粗
   • < del>删除线标签
   • < i>:斜体

3. 图片标签：

   < img/> : < img src=“image/jingxuan_2.jpg” align=“right” alt=“古镇” width=“500” height=“300”/>

   ​ 相对路径：以 .开头的路径(当前html文件所在目录)

   ​ ./ :代表当前目录

   ​ …/ :代表上一级目录

   属性：

   • src:图片名及URL地址

   • alt:图片加载失败时提示的信息

   • title:文字提示属性

   • width:图片宽度

   • height:图片高度

   • border:边框线粗细

4. 列表标签：

   有序列表：< ol type=“A”>

   ​ < li> 睁眼< li>

   ​ < li> 穿衣服< li>

   ​ < /ol>

   无序列表：< ul>

   ​ < li>睁眼< li>

   ​ < li>穿衣服< li>

   ​ < /ul>

5. 链接标签：

   < a>:

   ​ 属性：href 网页地址,本地页面

   ​ target="_self" (默认值) 本页面跳转

   ​ target="_blank" 打开新页面跳转

   ​ title:鼠标放上去的提示信息

   1.普通超链接

   ​ < a href=“https://baidu.com” target="_self">点我< /a>

   < a href="./列表标签.html" target="_self">点我< /a>

   2.锚点超链接：在当前页面内某个地方设置坐标，在其他地方设置连接跳转到坐标处

   设置锚点 ：.设置id属性

   设置链接: href值设置为: #+id值

   ​ < a id=“美女1”>< /a>

   <img src=".\课件\素材\images\11.jpg" alt="美女图片" title="美女图片" width="100%">
   

   < a href="#美女1>跳转到美女1< /a>

6. 表格标签：

   表格	描述	常用属性
   < table>	定义表格	border、width、cellspacing(单元格间距)、cellpadding
   < caption>	定义表格标题	align水平排列位置（left、center、right）
   < th>	定义表格的表头	align、valign竖直位置(top、。。)
   < tr>	定义表格的行	align
   < td>	定义行的单元格	align、rowspan(合并行)、conlspan(合并列)
   < thead>	定义表头	align
   < tbody>	定义表格主题	align
   < tfoot>	定义表格脚	align

学生

学号	姓名	年龄
123	张三	18
124	李四	20
12	王五	20

7. 块标签：

   < div>：可以指定宽高尺寸

   < span>

8. 表单标签：用于接收用户输入

   < form>:用于定义一个范围，代表采集用户数据的范围

   属性：

   ​ action: 指定提交数据的UPL

   ​ method: 指定提交方式（一共7中，2中常见）：

   ​ get: 1.请求参数会在地址栏中显示

   ​ 2.请求参数长度有限制

   ​ 3.不太安全

   ​ post: 1.请求参数不会在地址栏 中显示，会封装在请求体中（http协议）

   ​ 2.请求参数大小没有限制

   ​ 3.较为安全

    *表单中的数据要想被提交，必须指定其name属性
   

   表单项标签：

   ​ < input> ：通过属性type，改变元素改变的样式

   ​ type属性值：

   ​ “submit”:提交按钮。可以提交表单

   ​ “reset”:重置表单内容

   ​ “text” 默认值

   ​ placeholder属性：指定输入框的提示信息，当输入框被选中，提示信息会清空

   ​ “password”：输入时不可见

   ​ “radio” :单选框 注意：1.两个单选框的name属性值必须相等。

   ​ 2.一般会给单选框添加value属性值,指定提交后的值

   ​ 3. checked属性指定默认选择

   ​ “checkbox” :复选框

   ​ 1.一般会给单选框添加value属性值,指定提交后的值

   ​ 2. check属性指定默认选择

   ​ “file” :提交图片

   ​ “hidden”:隐藏域

   ​ “button”：普通按钮

   ​ “image” ：图片提交按钮 可以提交表单 ，src属性指定图片的路径

   ​ “date” :时间

   ​ “datetime-local”： 时间 到十分

   ​ “number”：数字

   < label>:指定输入项的文字描述信息。注意：label的for属性值一般和input的name属性值对应，点击 label区域，会让input输入框获取焦点

    < select>  :下拉列表
   

   ​ < option>:每一个下拉项 属性：selected设置为默认

    < textarea>: 文本域    
   

   ​ 属性：rows 设置列 cols 设置行

   ​

   用户名：
   密码：
   性别： 男 女
   爱好： 逛街 java 游戏
   添加图片： 隐藏域：
   生日：
   生日：
   邮箱：
   年龄：
   
   学历： 大专 本科 硕士
   
   简介：
   
   
   

9.框架标签< iframe>

属性： src:指定iframe中现实的文档的URL

​ name:

​ height:高度

​ width:宽度

​ frameborder；是否显示边框

例如：< iframe src=“1.html” name=“myframe” width=“700” height=“500”>

音频标签：

< audio>

​ 属性：src:设置路径； controls 可见，控制播放

​ < source> 可以设置多个不同格式的文件，由阅览器识别选择第一个可播放的文件

​ 属性：type设置文件格式

例如：< audio controls>

​ < source src=“song.ogg” type=“audio.ogg”>

​ < source src=“song.ogg” type=“audio.ogg”

视频标签：

< video>

属性：src:设置路径； controls 可见，控制播放； poster规定在播放之前显示的图片

< source> 可以设置多个不同格式的文件，由阅览器识别选择第一个可播放的文件

​ 属性：type设置文件格式

flash动画标签：

< embed>

​ 属性：src