HTML 标签

什么是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>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值