HTML 标签_超文本标记语言的文件创建名为-CSDN博客

本文链接：https://blog.csdn.net/qq_38733069/article/details/104280292

什么是html

HTML 与 W3C（World Wide Web:www）的关系，HTML 规范是由 w3c 负责制定的，W3C 是世界万维网联盟。

html是用来描述网页的一种语言，使用html可以制作出简单的网页。

html 是超文本标记语言的缩写 (Hyper Text Markup Language)
html 而是一种标记语言，不是编程语言
html 使用标记标签来描述网页

创建一个文本文件，将txt的扩展名修改为以.html或.htm结尾的文件，用文本编辑器打开就可以开发。开发好之后使用浏览器打开就可以查看效果，打开后浏览器会自上而下的解析html标签，不需要编译,html不严格，编写时注意嵌套位置。html中的标签不区分大小写，建议使用小写，并且都是成对出现的

<!DOCTYPE html>
<html>
    <head>
        整个页面的属性，比如标题
        指导浏览器解析的标签，比如编码
        引入外部文件的标签，引入css或者javascript让他们产生关系
    </head>
    <body>
          我<font color="red" size="6">喜欢</font>打乒乓球
    </body>
</html>

<!DOCTYPE html>必须要出现在最上方的第一个位置，这不是一个 HTML 标签，是一个声明，它是用来告知 Web 浏览器页面使用了哪种html版本，<!DOCTYPE html>这个声明告诉浏览器使用了html5。
如果不编写<!DOCTYPE html>声明，浏览器也可以显示，不过有时候会出现问题，所以建议编写<!DOCTYPE html>声明。

文件标签

<html></html>:根标签
<head></head>:头标签
<title></title>:页面的标题

这个title标签可以显示浏览器上面的名字，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
</body>
</html>

浏览器上显示的就是

在body中添加属性 bgcolor 可以改变背景色，background可以添加背景图片

在html的同级目录下创建image文件夹，修改html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>image/image/
</head>
<body text="blue" bgcolor="orange" background="image/girl.jpg">
我<font color="red" size="6">喜欢</font>打乒乓球
</body>
</html>

排版标签

创建一个新的html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排版标签<</title>
</head>
<body>
静夜思
<br/>
李白
<hr width="50%" size="5px" color="orange" align="left"/>
<br/>
<p align="center" >
    床前明月光
    <br/>
    疑是地上霜
    <br/>
    举头望明月
    <br/>
    低头思故乡
    <br/>
</p>
</body>
</html>

其中标签的属性是

1.注释：<!-- -->
2.换行标签：<br/> 一般写单个标签即可
3.段落标签：<p>文本文字</p> 段与段之间有空行。
  属性：align:对齐方式（有三个属性值：left  center   right） 


4.水平线标签：<hr/> 一般写单个标签即可
    属性：
        width:长度
        size:粗度
        color：颜色
        align:对齐方式
    尺寸的写法：
        （1）像素：500px
        （2）百分比：50%，占据上级标签的百分比，会随着上级标签的大小进行变化

块标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
<div style="background-color: red">div1</div>
<div style="background-color: pink">div2</div>
<span style="background-color: blue">span1</span>
<span style="background-color: orange">span2</span>
</body>
</html>

<div></div>:行级块标签，两个div之间会换行，

<span></span>:行内块标签，两个span之间不会换行

<div></div>：一般使用div+css进行页面的布局，目前比较常用的一种方式。 <span></span>：主要用于友好提示，比如在网站登录失败时会给出一些提示，不过有的网站使用div替代。

文字标签

新建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<font color="red" size="2" >文字</font><br/>
<font color="red" size="5" face="黑体">文字</font><br/>
<font color="red" face="黑体">文字</font><br/>


<hr/>

<h1>文字</h1>
<h2>文字</h2>
<h3>文字</h3>
<h4>文字</h4>
<h5>文字</h5>
<h6>文字</h6>
</body>
</html>

标签介绍

文字标签：<font></font>

属性： color:颜色

size:大小（最大值:7，最小值:1，默认值:3）

face:字体类型

标题标签：<h1></h1>-<h6></h6> 随着数字的增大逐渐变小，字体是加粗的，内置字号默认占据一行

清单标签

新建html,内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清单标签</title>
</head>
<body>
<ul type="square">

    <li>一行</li>
    <li>一行</li>
    <li>一行</li>
    <li>一行</li>

</ul>

<hr/>

<ol type="1" start="2">
    <li>一行</li>
    <li>一行</li>
    <li>一行</li>
    <li>一行</li>

</ol>
</body>
</html>

标签内容介绍

无序列表：<ul></ul> <li></li>:

列表项属性： type：有三个值，分别为disc、 square和circle

有序列表：<ol></ol> <li></li>:

列表项属性： type：1、A、a、I、i start:数字，代表首项开始位置列表标签的作用：实现菜单栏（横向或者纵向均可）无序列表标签的小圆点在HTML中不能直接去掉，需要在CSS中设置

图形标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="image/bird.jpg" alt="鸟" width="20%" height="20%" border="3" align="bottom" />
一只小鸟
</body>
</html>

标签内容介绍

<img /> 属性：

src:图片地址

width:宽度

height:高度

border:边框

align:图片与相邻的文本的相对位置（top，middle，bottom）

alt:图片文字说明，将鼠标移到图片上时会显示。

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="http://www.baidu.com" target="_blank">百度</a>

<a name="top">顶部</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#top">回到顶部</a>
</body>
</html>

标签内容介绍

<a></a>链接标签

属性：

href:跳转页面地址

name:名称，锚点

target:_self(从当前页面打开跳转的页面)

_blank(从新的页面打开跳转的网页)，默认是_self 作用：（1）页面跳转，注意：要调到外网必须要加http://

（2）访问锚点；当页面较长时，可以在底部设置一个<a>标签链接到某个锚点中，例如回到顶部，在访问锚点时的书写格式：#name；

HTML表单标签

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单标签</title>
</head>
<body>

    <form name="myform" action="#" method="post">

        <table>

            <tr>
                <td>
                    姓名
                </td>
                <td>
                    <input type="text" name="username" value="李四">
                </td>
            </tr>
            <tr>
                <td>
                    密码
                </td>
                <td>
                    <input type="password" name="password" value="">
                </td>
            </tr>
            <tr>
                <td>
                    性别
                </td>
                <td>
                    <input type="radio" name="sex" value="male">男
                    <input type="radio" name="sex" value="female" checked="checked">女
                </td>
            </tr>
            <tr>
                <td>
                    爱好
                </td>
                <td>
                    <input type="checkbox" name="hobby"  value="football" >足球
                    <input type="checkbox" name="hobby"  value="baskerball" checked="checked">篮球
                    <input type="checkbox" name="hobby"  value="paiqiu">排球
                </td>
            </tr>
            <!-- 下拉列表 -->
            <tr>
                <td>
                    地址
                </td>
                <td>
                    <select name="city"><!-- city=tj -->
                        <option value="bj">北京</option>
                        <option value="sh">上海</option>
                        <option value="tj" selected="selected">天津</option>
                    </select>

                </td>
            </tr>
            <tr>
                <td>
                    上传头像
                </td>
                <td>
                    <input type="file" name="file">
                </td>
            </tr> 

            <!-- 文本域 -->
             <tr>
                <td>
                    备注
                </td>
                <td>
                    <textarea name="remark" cols="30" rows="10">好好学习</textarea>
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input type="submit"  value="提交">
                    <input type="button"  value="button">
                    <input type="reset"  value="reset">
                    <input type="image" src="images/btn.gif" alt="图片">
                    <input type="hidden" name="hide" value="monkey1024">
                </td>
            </tr>

        </table>

    </form>

</body>
</html>

属性解释

1、form标签：<form></form>
    属性：    
        name:表单名称
        action:提交的路径地址
        method:提交方式（get，post，put，delete），其中get和post使用的多，如果不明确指出，则默认使用get方式。

        get和post的区别：
            (1)get提交将数据加在地址栏的后面，格式?name=value&name=value；post提交将数据封装在请求体中
                ?username=zhangsan&password=123&sex=male&hobby=football&hobby=basketball&city=tj#
            (2)get提交相对不安全；post提交相对安全
            (3)get提交有大小限制，根据浏览器不同而不同；post不限制大小


2、input标签：<input type=" "/>
    type属性:根据type属性实现各种不同功能的表单项；
        text：普通的文本输入框；
            name：username value="张三"<!--张三是默认值-->
        password：密码输入框；特点是显示的是掩码
        radio：单选按钮
            name：如果想让一组单选按钮互斥，就用指定同意name属性值，需要加value属性值；
            checked：默认被选中；                
        checkbox：复选框；
            name：组的概念，需要加value属性值。
            checked：默认被选中；
        file：上传文件的控件
        button：普通按钮，没有任何内置的功能；
        submit：内置功能，点击会按照action地址提交
        reset：重置，点击会清空之前填写的内容
        image：图片按钮，功能类似与submit
            src：加载图片
            alt:图片的提示文字
        hidden:隐藏表单，作用是在提交数据的时候，服务器需要这个数据，但是不需要用户看到。

    注意：name属性必须要写。

3、select标签(<select></select>)：下拉菜单
    属性：
        name;表单项的名称
    option标签：可选项（下拉菜单之间的级联）
        属性：
            value，表单项的值
            selected：默认被选中

4、textarea:文本域标签
    属性：
        cols：列数
        rows：行数
    注意：默认的文本值在标签体当中

CSS

什么是css？

css全称是Cascading Style Sheet的缩写，层叠样式表，是对html进行样式修饰语言。多个不同的样式修饰同一个html时，样式冲突的部分会使用优先级高的样式，不冲突的部分共同修饰

css的作用

可以让html变的更加炫酷
便于后期维护，html的内容与样式相分离
提高代码的复用性，同一个样式可以应用于多个html中

CSS代码需要嵌入在html中，没有 HTML 代码，CSS代码是无效的。

css的引入方式

1.内嵌样式，不建议使用
把css的代码嵌入到html标签中

<div style="color:red;font-size: 100px;">css样式</div>

语法：
style="样式名 1:样式值 1; 样式名 2:样式值 2;"

2.内部样式，内容多的情况下不建议使用
在head标签中使用style标签进行css的引入

<style type="text/css">
    div{color:red;font-size: 100px;}
</style>

使用style标签进行css的引入,在style标签中编写css

    <style type="text/css">

type：告知浏览器使用css解析器去解析

3.链入外部样式，建议使用
将css样式在一

<link rel="stylesheet" type="text/css" href="style.css"/>

个单独css文件编写，可以被html引用，下面代码引入名为style.css的文件

css选择器

1.元素选择器

  <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>元素选择器</title>

    <style type="text/css">
        span{color:red;font-size:88px; }
    </style>

    </head>
    <body>
        <span>我想学习css</span>
    </body>
    </html>

2.id选择器
html中，每个标签都有一个id属性，id的值在一个html文件中是唯一的

   <!DOCTYPE html>
    <html>
    <head>    
    <meta charset="UTF-8">
    <title>id选择器</title>

    <style type="text/css">
        #div1{background-color: orange;}
        #div2{background-color: pink;}
    </style>

    </head>
    <body>
        <div id="div1">css id选择器1</div>
        <div id="div2">css id选择器2</div>
    </body>
    </html>

3.class选择器

  <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>class选择器</title>

    <style type="text/css">
        .style1{background-color: orange}
        .style2{background-color: pink}
    </style>

    </head>
    <body>
        <div class="style1">css class选择器1</div>
        <div class="style1">css class选择器2</div>
        <div class="style2">css class选择器3</div>
    </body>
    </html>

选择器的优先级：id>class>元素

属性选择器

语法：基本选择器[属性='属性值']{css属性}

<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>

<style type="text/css">
    input[type='text']{background-color: yellow}
    input[type='password']{background-color: pink}
</style>

</head>
<body>
    <form action="">
        <tr>
            <td>用户名：</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" /></td>
        </tr>
    </form>
</body>
</html>

伪元素选择器

常用的一般就是a标签的伪元素选择器
语法：
a标签一般有下面四种状态
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}

<html>
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>

    <style type="text/css">
        a:link{color:blue}
        a:hover{color:red}
        a:active{color:yellow}
        a:visited{color:green}
    </style>

</head>
<body>
<a href="http://www.baidu.com">点我试试！</a>
</body>
</html>

层级选择器

语法：父级选择器子级选择器 …..
示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>

    <style type="text/css">
        #d1 .dd2 span{color:red}
    </style>

</head>
<body>
<div id="d1">
    <div class="dd1">
        <span>span1-1</span>
    </div>
    <div class="dd2">
        <span>span1-2</span>
    </div>
</div>
<div id="d2">
    <div class="dd1">
        <span>span1-1</span>
    </div>
    <div class="dd2">
        <span>span1-2</span>
    </div>
</div>
</body>
</html>