目录

1.标题排版

2.标题样式

​编辑 ​编辑

小结

3.超链接

4.正文排版

​编辑​编辑​编辑5.正文布局

6.表格标签

7.表单标签

8.表单项标签

1.标题排版

● 图片标签 :< img>

· src:指定图像的ur1(绝对路径/相对路径)

· width:图像的宽度(像素/相对于父元素的百分比)

· height:图像的高度(像素/相对于父元素的百分比)

● 标题标签 :< h1> -< h6>

● 水平线标签 :< hr>

1. 标题标签

● 标签 :< h1> ...< /h1>(h1→h6 重要程度依次降低)
● 注意:HTML标签都是预定义好的,不能自己随意定义。

2. 水平线标签 <hr>

3. 图片标签

<img src=" ... " width=" ... " height=" ... ">

● 绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)
● 相对路径:从当前文件开始查找。(./:当前目录, .. /:上级目录)

2.标题样式

 

小结

1. <span>标签

●<span>是一个在开发网页时大量会用到的没有语义的布局标签

● 特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开

2. CSS选择器

● 元素选择器:标签名 { ... }

●id选择器:#id属性值 { ... }

● 类选择器 :. class属性值 { ... }

● 优先级:id选择器>类选择器>元素选择器

3. CSS属性

● color:设置文本的颜色

●font-size:字体大小 (注意:记得加px)

3.超链接

● 标签:

<a href=" ... "target=" ... ">央视网</a>

● 属性:

href:指定资源访问的url

target:指定在何处打开资源链接

     _self:默认值,在当前页面打开
     _blank:在空白页面打开

4.正文排版

● 视频标签 :< video>

src: 规定视频的url

· controls:显示播放控件

· width:播放器的宽度

· height:播放器的高度

● 音频标签 :< audio>

· src:规定音频的url

controls:显示播放控件

● 段落标签 :< p>

● 文本加粗标签 :< b>/<stroag>

5.正文布局

● 布局标签:实际开发网页中,会大量频繁的使用div和span这两个没有语义的布局标签。

● 标签 :< div> <span>

特点:
● div标签:
● 一行只显示一个(独占一行)

● 宽度默认是父元素的宽度,高度默认由内容撑开

● 可以设置宽高(width、height)

● span标签:
● 一行可以显示多个
● 宽度和高度默认由内容撑开

● 不可以设置宽高(width、height)

6.表格标签

7.表单标签

● 场景:在网页中主要负责数据采集功能,如注册、登录等数据采集。

● 标签 :< form>

● 表单项:不同类型的input元素、下拉列表、文本域等。

● <input>:定义表单项,通过type属性控制输入形式

● <select>:定义下拉列表

● <textarea>:定义文本域

属性:

● action:规定当提交表单时向何处发送表单数据,URL

● method:规定用于发送表单数据的方式。GET、POST

8.表单项标签

<input>:表单项,通过type属性控制输入形式。

<select>:定义下拉列表,<option>定义列表项。

<textarea>:文本域