html

html

骨架(基本框架)

/DOCTYPE 文档类型定义/

/lang是language的缩写,代表该网页属于哪一个国家或者地区的网页/

     /* meta标签被称为元数据,作用是专门告诉浏览器或是搜索引擎关于网页的一些基本数据*/ /*charset :char(字符的意思)+set(集合的意思)=字符集合=简称为“字符集”,作用是告诉浏览器我们的网页上文字的编码格式,不同的编码格式包含的文字内容不一样。 如果浏览器不知道网页文件的字符集的话,那么网页文件的内容就会变成乱码。 */

Document

/存放网页上的所有信息和内容/ (根标签)

/存储网页上给浏览器或搜索引擎看到的东西/(头标签)

/网页的名字/

/存放用户看到的一切东西(图片,音频,视频,文本)/(身体标签)

其他:

(1)

​ /* Description:为搜索引擎提供参考,网页的描述信息被搜索引擎采纳后,作为搜索结果中的页面摘示。*/

(2)

​ /*Keywords:为搜索引擎提供参考,网页内容所包含的核心搜索关键词。

​ 网页的关键字信息作用是:作为网页名字的补充,描述网站主要从事的业务领域,方便用户可以在搜索引擎搜 索更多的词语情况下,扩大用户找到我们网站的可能性。*/

一 标签

总结:

i类型:

(1)单标签:


<br / >

(2)双标签:

​ 标题标签

  <p></p>

​ 文本格式化标签

ii 标签关系:

(1)嵌套(父子)
			<head>
			    <title></title>
			</head>
(2)并列(兄弟)
				<head></head>

1.标题标签(熟记)
h1,h2,h3,h4,h5,h6(逐级减小)

h1标签通常用于logo部分

2.段落标签(熟记)

文本内容

3.水平线标签(认识)


(单标签)
4.换行标签(熟记)

5.div span 标签(重点)

(没有实际的语义)用来布局
6.文本格式化标签(熟记)
(1)加粗(推荐用strong)

(仅仅加粗)

(含有语义话,强调作用)

(2)倾斜(推荐em)

(3)删除线(推荐用del)

​ (4)下划线(不建议用u)

7.图像标签(重点)

(1) 图像的路径
(2) 图像不能显示时的替换文本
(3) 鼠标悬停时显示的内容

(4) 带有宽高图像(宽高给一个即可,自动等比缩放)

(4) 带有边框的图像

8.链接标签(重点)

文本或图像

(想要跳转必须加href)

注意:

(1)外部链接需要加 http://

(2) 内部链接 (直接链接内部页面内容即可)

eg.首页

(3)若当前没有确定的跳转目标,通常写为

11

(表示当前跳转链接为空)

(4)不仅可以创建文本超链接,在网页中各种网页元素,如图像,表格,音频,视频等都可以添加超链接。

<1>锚点定位(重点)

(快速定位)

文本或图像

eg

	<h1 id="class"></h1>
<2>base标签(单标签)

(可以设置整体链接在新窗口打开)

9.注释标签

(1)多写注释是很好的代码习惯,团结协作更流畅

(2)注释的内容浏览器不予显示,是给队友看的

10.其他标签(了解)

(1)

blockquote标签的作用就是:在网页内容中间划分展示大段引用自古典,古籍或是名人名言的区域。

(2) 视频标签

(3)音频标签

/视频,音频 用 controls 属性控制/

二 标签的属性

1.标签可以有多个属性,必须写在开始标签中,位于标签名后面
eg.

2.属性之间不分先后顺序,标签名与属性,属性之间要用空格隔开。

eg.


3.任何标签的属性都有默认值,省略该属性则取默认值。

eg.


三特殊字符(理解)

(1)  空格
(2)<小于
(3)>大于
(4)©版权

四 路径(重点,难点)

(1)相对(推荐)
第一点:同级(推荐)

​ <html 文件 和img在同一文件夹下>(直接写图片名字)

​ eg.

第二点:下级(推荐)

​ (images文件下的img)

​ eg.

​ 第三点:上一级 (很多HTML文件在一个文件夹下,所有的HTML和img在同一个大文件下)

​ eg.

(2)绝对

​ 第一种:本地,右击属性,地址复制(禁用)

第二种:浏览器,右击图片,复制图片地址(经常用)

五 列表

1.无序列表ul(重点)
注意:
(1)ul里面只能放li标签

(2)li标签里可以放其他标签

2.有序列表ol(了解)

五种排序形式:
阿拉伯数字 1
小写字母 a
大写字母 A
罗马 I
罗马 i
3.自定义列表(项目 的结尾/底部)
名词
对dt的名词进行描述
注意:
(1)dt 和dd 一一对应

(2)一个dt可以对应多个dd

(3)但是多个dt不能对应多个dd

eg.

以上代码为 错误的代码格式
发布了5 篇原创文章 · 获赞 5 · 访问量 64
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览