html学习笔记

最新推荐文章于 2024-05-18 14:03:48 发布

羊羊669

最新推荐文章于 2024-05-18 14:03:48 发布

阅读量81

点赞数

文章标签： html

本文链接：https://blog.csdn.net/zhangyangyang21/article/details/119302093

版权

标签及标签内容

标签：标签是HTML语言中最基本的单位，需要记住常用的标签，忘记时自行查阅
HTML文档

网页基本结构

html的作用的是网页的结构，css负责渲染，因此html结构最重要。
<!doctype html>:文档声明，使用html5的版本
<html>:网页从这开始，根标签（根元素）
<head>:这部分不在网页显示，与网页的头部相关，子元素（帮助浏览器解析网页）
<mate charset=“utf-8”>：设置网页的字符集，避免乱码
<body>:网页内容，子元素

<!doctype html><!--文档声明，使用html5的版本 -->
<html lang="el"><!--网页从这开始，根标签（根元素）lang=“”用英文写 -->
	<head><!--这部分不在网页显示，与网页的头部相关，子元素（帮助浏览器解析网页）-->
		<title>羊羊的网页</title><!-- 网页的标题栏，会作为收索超链接的结果-->
	</head>
	<body><!--网页内容，子元素-->
		<h1>羊羊</h1><!-- 以及标题-->
		<!--  这是注释
		-->
	</body>
</html>

布局常用的

块元素：div
行内元素：sapn
两者都是无语义

自结束标签

一般标签是成对出现的，
自结束标签（只有一个，无成对出现）

<img>、<input>

标签的属性

1、属性：用来如何显示属性内容，如字体颜色、大小等（只能在标签开头或自结束标签中写，不能在标签结尾）
2、属性是个名值对（x=“y”或x=‘y’）
3、属性与标签名或其他属性应用空格隔开
4、无属性值无需加=“”

<h1><font color="red">羊羊</font></h1>

列表

1、有序列表：ul
2、无需列表：ol
有序列表、无需列表中用dl写内容
3、定义列表：dl，用dt定义表示内容，用dd对表示内容解释说明
4、三者可以互相嵌套

<ul>
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
</ul>

超链接

1、作用：让我们跳转到另一个页面、跳转到页面其他位置
2、用a来定义超链接，a里面可以存放除本身外任何一个
3、a的属性herf，可以定义到任意网站herf的值可以是网站地址，页可以是文件下的文件名。
4、target属性指定打开方式，_blank新的页面打开，_self当前页面打开
5、跳转到页面其他位置，当herf的值为“#目标元素的id属性值”即可跳转

<a href="http://www.baidu.com">百度网站</a>
<a href="http://www.baidu.com"target="_blank">百度网站</a>
<a id="p1"href="#">回到顶部</a>
<a href="#p1">回到p1</a>

相对路径

访问服务器内部文件可以用相对路径
1、,/代表该目录文件下
2、…/代表上一级目录文件下

实体

在html中一般空格或其他符号都会默认不显示或省略
用实体就可以表示

&nbsp;<!--代表一个空格-->
&gt;<!-- greater-than sign代表大于号-->
&lt;<!-- less-than    sign代表小于号-->
&copy;版权符号

元素分类

块元素（block element）：在网页独占一行
行内元素（inline element）：在网页不独占一行
替换元素（）：在页面中不显示内容，而显示内容指定的图片，如img

图片标签

1、img标签：在当前页面添加外部图片（自结束、替换元素），
2、img用属性src指定路径，用alt描述图片（一般不显示出来，但图片不显示可能会显示出来，搜索引擎会根据此内容来识别图片），width指定宽度，heigth指定高度

<img src="img/dog.jpg"

内联框架

1、标签 iframe,属性frameborder值为0则无黑色边框，1为黑色边框。属性src指定路径

<iframe src="http://www.baidu.com"frameborder="0"width="300"height="300"></iframe>

音频

一、音
1、audio：属性src：路径。属性controls(audio默认用户无法控制音频，controls能让用户控制播放)；属性autoplay（自动播放）（大部分浏览器不会自动播放）；属性loop（循环播放）；controls、autoplay 、loop等都不用赋值
2、embed（老版本支持）怎么使用查文档

<audio src="source/m1.m4a" controls></audio>
<!--以防浏览器版本不支持播放音频。
	<audio control>
	浏览器的版本不支持音频播放，请更新。
	<source src="source/m1.m4a" >
</audio>
-->

二、视频
1、video
三、做网页时，不会用本地路径（钱），用iframe引入其他