html学习笔记2-腾讯云

HTML学习笔记

1. html组成

   

 

1. html5标签

        

一、标题的级别

 

当主副标题同步存在时用hgroup（标题组）标签

2、html5和xhtml1.0的区别

html5：每个区块里的主标题均使用h1；

每个区块里的副标题均使用h2；

网页中通常拥有多个h1。

xhtml1.0：按级别依次使用h1-h6；

网页中有且仅有一个h1。

总结：1、主标题h1，副标题h2；

2、h1/h2成组出现时使用hgroup父对象；

3、标题要能概括随后的内容，导航条里的条目一般不会使用标题标签；

4、标题的级别极其依赖于结构本身。

3、span标签

行级标签

<span class='boy'>丘处机</span>

span用来划分小区域

不会主动引起换行（属于行级元素）

常常结合class属性使用

4、引用标签

blockquote 旧有标签，长的引用

q短引用

cite参考文献的引用

cite属性：

表示引用的来源

主流浏览器均不支持cite属性，不过搜索引擎可能会使用该属性获得更多有关引用的信息。

5、标注mark

mark标签作为一个冷门标签，有一些兼容性问题

mark标注那些不重要，但在特定情况下需要标注的文字

6、图像标签

6.1、img标签

图像的标签与属性：

img图像

src图像url

width宽

height高

alt替代文本

6.2、流内容figure、figcaption

figure流内容组合（媒体及注解）

figcaption流内容的注解

与主要内容相关的图像图表媒体等

如删除或者更改位置，对主要内容的理解不产生明显影响

figure标签的视觉效果较好

7、列表

列表：

• ol: ordered list有序列表

• ul: unordered list无序列表

• li: list item

<ol>
    <li>有序列表</li>
</ol>
<ul>
    <li>无序列表</li>
</ul>
多级列表
<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项
        <ul>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ul>
    </li>
</ol>

列表的适用条件：

• 连续列举同一主题下的多个项目

• 条目之间是并列关系

• 各项目格式相同或相近

小结：

• 围绕同一主题，连续列举多个格式相同的条目，就可以使用列表系列标签ol/ul/li

• 一般列表的结构：ul>li

• 多级列表的结构：ul>li>ul>li

定义列表

• definition list

• 标签dl

• 标签dt

• 标签dd

定义列表

<dl>
    <dt>即将被定义的名词</dt>
    <dd>解释1</dd>
    <dd>解释2</dd>
    <dd>解释3</dd>
</dl>

对一个名词的定义，使用dl、dt、dd标签

可以使结构更清晰，代码层级更少，更精简

8、html链接

target属性

• target="_blank"

• target="自定义窗口名"

小结

• <a href="URL" target="窗口名">

绝对url

• 当目标页面位于网站外部，采用绝对URL

• 格式：协议名://主机名[/目录信息]

http协议

• 超文本传输协议

• Hypertext Transfer Protocol

https协议

• 安全超文本传输协议

• Secure Hypertext Transfer Protocol

mms协议

• 微软流媒体传输协议

• Microsoft Media Server Protocol

• 用于访问并流式接收Windows Media服务器中.asf文件的一种协议，常用于电视电台直播

ftp协议

• 文件传输协议

• File Transfer Protocol

• 一种上传/下载文件的基础协议

相对链接

• 目标页面位于同一主机，采用相对URL

站点默认文件

• index.html

• 或index.asp/default.php/...

• 由服务器本身的设置决定

一般文件命名

• 可以使用英文、数字、下划线_、中划线-

• 不区分大小写

• 建议有一定含义，方便辨认

• 如aboutus.html

• 同一文件夹中，直接写文件名

• 在上层文件夹中，先写"../"

• 在下层文件夹中，先写"文件夹名称/"

组合相对路径

静态网站文件组织建议

• 尽量将所有html页面放在同一个深度

• html页面较少时可以直接放在站点根目录下，优化命名

小结

• 按路径，组合"../"和"文件夹名称/"

• 在服务器已经妥当设置的情况下，也可以用"/"代表站点根目录

• 建议将html放在同一个深度

锚点链接

• 通常超链接总是指向目标HTML文件的头部，但超链接的目标也可以是某个文件的特定位置

• 也称为”锚点“书签，anchor

锚

• <x id="sName">

• <a name="sName">（较旧的形式）

• 以上两者可以一起使用，解决兼容性问题

链接至锚

• <a href="#sName">文字</a>

小结

• 用id或name来充当锚

• 用<a href="锚名”>..链接至锚

9、html表单

• 在网页中主要负责数据采集功能的组件

• 通常与数据库相连

• 由表单元素组成

form

<form action="login.aspx" method="post" id="search">
...
</form>

input

<label for="password2">password:</label>
<input type="password" name="password2" id="password2">

input标签的type属性

type="radio" 单选按钮
type="checkbox"复选框
type="text"文本
type="password" 密码字段
type="button" 普通按钮
type="submit" 提交按钮
type="reset" 重置按钮

name与id属性

• name：表单元素的名称；同一组单选按钮的name值相同

• id：唯一标识符；同一个网页里id不能重复

label标签

将文字与表单元素关联
<label for="textfield">标签文字</label>
<input type="text" name="textfield" id="textfield">

单选按钮组

<input type="radio" name="radiogroup1" value="单选" id="radiogroup1_0">
<label for="radiogroup1_0">单选</label>
<input type="radio" name="radiogroup1" value="单选" id="radiogroup1_1">
<label for="radiogroup1_1">单选</label>

select和option

<select name="select" id="select">
<option value="01">选项1</option>
<option value="01">选项2</option>
</select>

传统表单

• form

• input

• select

• option

• textarea 文本区域 可以写大段文字

<label for="textarea">textarea</label>
<textarea  name="textarea"  id="textarea">
</textarea>

• label

10、其他功能

video和audio

<video src="video.ogv" controls>
    <a href="video.ogv"> Download movie</a>
</video>
属性
poster
    属性值为图像URL，视频浏览图
autoplay
    如果出现该属性，则视频在就绪后马上播放
controls
    向用户显示控件，比如播放按钮
loop
    循环播放
preload
    视频在页面加载时进行加载，并预备播放，如果使用“autoplay”，则忽略该属性

video所支持的格式及浏览器兼容

• *.mp4

• *.ogg

• *.mkv(webM)

audio代码实例

<audio src="video.oga" controls>
    <a href="video.oga"> Download song</a>
</audio>

audio所支持的格式及浏览器兼容

• 现代浏览器可以支持video与audio标签

• 建议使用source标签增加多种格式以解决兼容性问题

canvas和webgl

• canvas：可以用来做网页小游戏，交互来提高视觉或使用体验。

• webgl：canvas基础上添加三维虚拟实景

• 现代浏览器可以支持canvas标签和webgl技术

三、html构建的原则

• 根据内容本身的属性

• 不依据样式细节

• 根据上下文结构关系

• 不考虑视觉上的摆放

• 根据内容的层次关系决定顺序

• 不依据视觉上的先后顺序

• html5本身的语义化程度较高，结构清晰，只要尽可能遵照html5标准的建议实施即可。

• html5中没有规定的，可以在开始大规模构建网页之前确认标准，尤其是在团队合作时。

• html5目前仍处在过渡阶段，有一些较新的写法要等待浏览器逐步支持，有时不得不用较旧的写法来提高兼容性。这部分我们后续会有专门的课程介绍。

id还是class

• id指一个元素的唯一标识符，不能重复使用

• class指同一类的多个对象，可以重复使用

• 不管是id还是class，都应该尽量避免用具有样式意味的命名

• 用id作为唯一标识符，同一网页中id不能重复出现

• 用class表现共性，表示一类带有共同特征的对象，class可以复用，也可以单独使用