html相关概念

持续更新中…

1.html相关概念

1.1站点

简单理解为就是一个文件夹,用来收纳所有的文件

建立站点的作用

规划网站的所有内容和代码
整合资源

<!doctype html>  <!--申明文档类型 html-->
<html>
    <head>  <!--头部开始-->
        <!--申明页面的编码集 国际编码-->
        <meat cahrset='utf-8'></meat>
        <title></title>
    </head><!--头部结束-->
    <body><!--身体开始-->
        
    </body>
</html>

1.2.网站的建站流程

注册域名(生成网站)
租用空间
网站建设
- 确定网站主题
- 搜索资料
- 规划网站
- 制作页面
网站推广
网站维护

1.3.网页的结构

网页的组成:

结构:网页的结构部分(html) 主体框架 XHTML xml
表现:网页的样式(css)
行为:网页要实现的交互功能(js)

1.4.WEB标准

web标准是网页制作的标准,他不是一个标准,它是根据网页的不同组成部分生成的一系列标准,这些标准大部分由w3c起草发布,也有部分标准由ECMA起草发布

在这里插入图片描述

(1)W3C(Wor1 d Wide Web Consortium)万维网联盟，创建于1994年是Web技术领域最具权威和影响力
的国际中立性技术标准机构；是专门负责网络标准制定的非嬴利组织。制定了结构标准(html)和样式标准(css)：
(2)ECMA:欧洲电脑网商联合会（厂商协会），制定了行为标准(js)；

2.计算机语言

2.1 HTML

带x的语法都比较严格,严格区分大小写等

HTML指的是超文本标记语言(Hyper Text Markup Language)www万维网的描述性语言。

XHTML指可扩展超文本标记语言（标识语言）(EXtensible HyperText Markup Language)是一种置标语言，表现方式与超文本标记语言(HTL)类似，不过语法上更加严格。

HTML5指的是HTML的第五次重大修改（第5个版本）

2.2HTML发展

在这里插入图片描述

2.3文件的命名规范

小写英文字母,数字,下划线的组合
其中不得包含汉字,空格和特殊字符
必须以英文字母开头,不能以数字开头
见名知意
驼峰命名法,匈牙利命名法(大驼峰BoxName,小驼峰boxName)

3.HTML开始

3.1HTML语言

HTML语言组成

标签:也叫做元素,标记

对标签(常规标签)

写在尖括号<标签 属性="值"></标签>里面的第一个单词,叫做标记,也叫做标签,也称为元素

单标签(空标签)

<标签 属性="值"/>

属性

标签和属性带空格隔开，属性和属性值用等号连接，属性值必须放在双引号内
一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后序

3.2常用标签

文本标题标签

h1~h6:标题标签,文本加粗变大,依次变小,独占一行,h1在一个页面中有且仅有一个,其他的可以多次出现

字体倾斜&加粗标记

文本加粗:
        <i></i>
        <em></em>
文本加粗:
		<b></b>
		<strong></strong>
i/em :倾斜的效果,i是视觉效果,em是斜体字,em具有强调作用.在一行显示
b/strong:加粗的效果,b是视觉效果,strong是粗体字,strong具有强调作用.在一行显示

下划线

<u>下划线</u>
下划线标签,在一行显示

换行&水平线
```
<br>换行
<hr>水平线
```

上标&下标

<sup></sup> 上标:2的平方 写法
<sub></sub> 下标:氧气写法

2<sup>3</sup>+2<sup>3</sup>
O<sub>2</sub> + 2H<sub>2</sub>

在这里插入图片描述
6. 段落标记

<p></p>
段落标签,独占一行,不能嵌套独占一行的元素,只能放文本,图片及在一行显示的元素

字符(小段文本)

<span></span>
文本节点标签,在一行显示,通常结合css展示视觉效果

DIV

盒子标签,独占一行,用来搭建页面结构

列表

无序列表

<ul type="修饰符号">
     <li>列表选项内容</li>
   	 <li>列表选项内容</li>
     <li>列表选项内容</li>
    .....
</ul>
ul>li 无序列表标签  独占一行  默认小黑点修饰 通常用来做导航 列表
type:disc 小黑点
	circle 空心圆
	square 实心方块
	注意:一般不使用

有序列表

<ol type="排序" start="起始位置">
     <li>列表选项内容</li>
   	 <li>列表选项内容</li>
     <li>列表选项内容</li>
    .....
</ol>
ol>li 有序列表标签  独占一行  默认阿拉伯数字修饰  通常用来做导航 列表 
type:1,a,A,I
start:起始位置

自定义列表

<dl>
   	<dt></dt>//标题
    <dd></dd>
</dl>
dl>dt+dd:自定义列表,独占一行,在一个dl中只有一个dt,可以有多个dd,通常用来做双导航

超链接

  <!-- 锚点链接 -->
    <a id="tips">有用的提示部分</a>
    <div style="height: 1000px">111</div>
    <a href="#tips">访问有用的提示部分</a>

<a></a>
a:超链接标签,实现页面与页面之间的跳转,在一行显示,文本默认蓝色带有下划线

属性:
href='url(跳转地址,#空地址)'
target="_blank" /"_self"/_new;
    _blank:打开一个新页面跳转
    _self:在本页面进行跳转,默认跳转方式
    _new:在新窗口中刷新
title="文本提示,鼠标悬停时的提示信息"(更加偏向给用户看)

图片

<img>
图片标签,往页面中插入图片,在一行显示
图片格式:
	.jpg 普通格式
	.gif 动态图格式
	.png 背景透明图
属性:
src='url';
绝对定位:
从盘符出发
域名地址	
相对定位:
 src=“img/1.jpg”
../返回上一级
./强调在当前目录
alt='标签实例  带有指定替换文本的图像'
title='文本提示'
width='宽度'
height='高度'
[注意]:只写宽度或者高度,另一个属性将等比例
border=''

图片title和alt区别

alt=“替换文本”:图片加载成功时不显示,不成功时候就显示,更多的是给搜索引擎查看,必须少于100个英文字符,必写属性,内容为空也要写

title=“提示文本”:鼠标移入时显示,移出不显示,更多的是给用户查看,可以不写

alt:
	1、a1t属性是考虑到不支持图像显示或者图像显示被关闭的刘览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
    2、a1t属性值得长度必须少于100个英文字符
    3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写a1t=""
    4、a1t属性是搜索引擎判断图片与文字是否相关的重要依据，a1t属性添加到img主要的目的才是为了SE0
title:
        1、tit1e属性并不是必须的。
        2、t1t1属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
        3、tit1属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

pre标签

<pre>
此例演示如何使用 pre 标签
对空行和                        空格
进行控制
</pre>