HTML学习总结-创新互联

一：什么是 HTML 文件？
1):HTML 指超文本标签语言。
2):HTML 文件是包含一些标签的文本文件。
3):这些标签告诉 WEB 浏览器如何显示页面。
4):HTML 文件必须使用 htm 或者 html 作为文件扩展名。
5):HTML 文件可以通过简单的文本编辑器来创建。
二：结构
4 HTML语言的结构
<html>
<head> 编码规范的(gbk/utf-8) -头文件标签
<title>标题标签</title>
</head>
<body>
html主体部分:这些内容最终会在浏览器中显示
</body>
</html> -有标签体的标签

专注于为中小企业提供成都网站设计、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业弋阳免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

三：HTML标签的分类
1) 标题标签:从<h2>到<h7>,<h2> 定义大的标题。<h7> 定义最小的标题。
2) 换行标签：<br>
3) 水平线标签:<hr>
4)换行标签:<br/>
5)段落标签:<p>
6)段落缩进:<blockquote>
7)上下标标签:<sup>和<sub>
8)原样输出标签:<pre>
9)字体标签:<font>
10)居中标签:<center>
11)图像标签:img 空标签体
<img/>
属性:
src:链接到的资源图片
width:图片的宽度两种方式:一种指定px(像素) 第二种:百分比
title:悬停状态,会显示文字
alt:当图片失效的时候,用来解释说明该图片
height:图片的高度
12)转义字符:
空格: 注意事项(分号一定要带上)
<: &lt ; (letter than)

:>(greater than)
<h2></h2>
注册商标:® ®
版权所有:© ©
13)有序列标签
ol li列表项
14)无序列标签
ul li列表项
15)超链接标签
1>连接到某个资源文件或者资源地址(URL)
2> 作为锚连接来使用
在同一个html页面下:
a> 打锚点:
<a name=”锚点名称”></a>
b)创建跳转
<a href=”#锚点名称”>跳转</a>

不同页html页面下:
                        c)打锚点:
                                <a name=”锚点名称”></a>
                        d)创建跳转标记
                                <a href=”资源文件或者资源地址#锚点名称”>跳转</a>

16)表格标签:
1>table标签
属性:border 表格的边框 width 表格的宽度 height表格的高度
2>align:标签在浏览器中的对齐方式 bgColor:背景色
3>tr:行标签
4>td:列(单元格)
5>th:表头标签(默认为：居中,加粗)
6>行合并:rospan
7>列合并:colspan

四：CSS网页布局
1）css的使用方法有三种：
1> 行内样式
标签 style属性:指定样式
弊端:style属性它和html标签混合使用,不利于后期维护
2>内部样式
书写格式:
选中某个标签名{
书写样式;
}
3> 外部方式
a) 创建css文件:指定标签的样式
标签选择器{
书写样式;
}
b) 需要外部导入该css文件
rel属性:关联层叠样式表
<link href=”需要被导入的css文件” ref=”stylesheet”>

2)css背景
1> 背景边框的设置:首先在头文件中加入<style type="text/css">
2>在body属性中进行颜色的选择 body {background-color: yellow}
3)css文本
1>文本颜色的设置<style type="text/css">
eg： h2 {color: #00ff00}
</style>
</head>
<body>
<h2>This is header 1</h2>
</body>
4)css字体
1>首先在头文件中加入<style type="text/css">
2>在p {font-family: .......}进行设定
<head>
<style type="text/css">
p {font-family: courier}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>

5)css边框的设定
1>首先在头文件中加入<style type="text/css">
2>在p.* {border-style：....:}进行边框样式的设定
eg： <head>
<style type="text/css">
p.dotted {border-style: dotted}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
</body>
3>在p. { border-color: .......}进行颜色的设定
eg: <html>
<head>
<style type="text/css">

                                                                                        p.one
                                                                                                                {
                                                                                                                border-style: solid;
                                                                                                                border-color: #0000ff
                                                                                                                                                                                }
                                                                                                        </style>
                                                                                                        </head>
                                                                                                        <body>
                                                                                                        <p class="one">One-colored border!</p>
                                                                                                            </body>
                                                                                                            </html>

6)css边距
1>首先在页面中建立一个<div>....</div>块标签
2>块标签的位置可以根据
a>magin的属性值来进行设定
b>可以用浮动来进行移动（多个图片重叠在一起的时候）
7）选择器的分类
1)标签选择器
标签名称{
样式;
}
eg; div{
font-size: 24px;
color: #f00;
}
2)id选择器
在使用的时候,给标签一定要指定id属性且指定id属性值
#id属性值{
样式;
}
eg: #dl1{
font-size: 24px;
color: #0f0;
}
（在同一个html页面下,不要给多个标签指定同名的id属性,id属性唯一的
javascript:根据id属性值获取当前的标签对象
document.getElementById("id是唯一的") ;
3)类选择器
在使用的时候,给标签一定要指定class属性且指定class属性值
.class属性值{
样式;
}
eg: .cls1{
font-size: 36px;
color: #00f;}

    (在同一个html页面中可以给多个标签指定同名class属性)

        派生选择器:
                1)并集选择器
                        选择器1,选择器2,选择器3{
                            样式;
                        }
                                            eg:                   #dl1,.cls1{
                                                                                                                            font-size: 24px;
                                                                                                                                color: #ff0;}
                2)交集选择器
                        选择器1 选择器2 选择器3{
                            样式;
                            }
                                        eg:                                         #dl1 span{
                                                                                                font-size: 36px;
                                                                                                     color: #000;}
                3)通用选择器
                    * :所有的意思,通配符号
                    *
    8)css伪类选择器  
      1>伪类选择器有4种状态:
                        a)鼠标没有访问过的状态 link
                        b)鼠标经过的状态 hover
                                c)鼠标激活状态(鼠标点击了,但是没有松开的状态)active
                                d)鼠标已经访问过的状态(点击了,并且松开的状态)   visited         
                2>格式为
                        标签名称:分别四种状态
                                                                                     1>   a:link{
                                                                                color: ****;
                                                                            }
                                                                            2>   a:visited{
                                                                                color:***** ;
                                                                            }
                                                                            3>   a:hover{
                                                                                text-decoration: none;/
                                                                                color: ****;
                                                                            }
                                                                            4>   a:active{
                                                                                text-decoration: underline;
                                                                                color: ****;
                                                                            }

注意：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：HTML学习总结-创新互联
本文地址：https://www.cdcxhl.com/article42/shohc.html

成都网站建设公司_创新互联，为您提供电子商务、商城网站、云服务器、全网营销推广、微信公众号、网站内链

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容