HTML

时间 2019-12-05
标签 html 栏目 HTML 繁體版
原文原文链接
1、web标准

一.HTML介绍:1.概述:HTML全称Hyper Txet Macepu Language,翻译为超文本标记语言,不是编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式,好比字体,颜色,大小等.HTML    超文本:音频,视频,文件,称为超文本.    标记:<单词或字母>这样的格式称为标记,一个HTML页面就是由各类标记组成的.没有编译的过程,HTML页面直接由浏览器解析执行    HTML除了语义什么都没有2.HTML标签对:标签对可以给文本不一样的语义3.HTML的网络术语:    网页,由各类标记组成的页面就叫网页    标记:<p>这样的标记称为开始标记,</p>这样的标记称为结束标记,也叫标签,每一个标签都规定好了,特殊的含义    元素:<p>内容</p>这样的总体称为元素4.HTML规范    4.1编写规范:        HTML不区分大小写,可是尽可能用小写        HTML页面的后缀名是html或htm(因为有一些系统不支持后缀名的长度超过3个字符)        HTML的结构:            声明的部分:主要高告诉浏览器,咱们这个页面使用的是哪一个标准,HTML标准            head部分:将不会显示在页面上的一些额外的信息告诉服务器            body部分:正常显示在页面上的内容放在此标签内                <!--文档的声明,告诉咱们执行的是HTML标准-->                <!DOCTYPE html>                <html lang="en">                <head>                    <!--网站的配置-->                    <meta charset="UTF-8">                    <!--标题标签-->                    <title>shanghongyun</title>                </head>                <body>                正常显示在页面上的内容放在此标签内                </body>                </html>    4.2基本语法特征:        HTML对换行不敏感,对tab不敏感        空白折叠        严格封闭5.结构详解:    1.头标签:    头标签放在头部之间,包含了<title>,<meta>,<link>,<style>        <title>:整个网页的标题,在浏览器最上方显示            <title>中国铁路</title>        <meta>:提供有关页面的基本信息            (1)http-equiv属性,与之对应的属性值为content                两秒后跳到对应的网址                    <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">                     refresh是固定的                 2是两秒   跳到这个网址                指定文档的内容类型,编码类型                    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />                                                            内容类型      编码类型                告诉IE浏览器,以最高级模式渲染当前网页                    <meta http-equiv="x-ua-compatible" content="IE=edge">            (2)name属性,与之对应的属性为content,主要用于页面的关键字和描述                便于搜索引擎查找和分类用的关键字(关键字之间用逗号隔开)                    <meta name="keywords" content="文字,图片,视频">                告诉搜索引擎,这个页面是干什么的                    <meta name="Description" content="介绍一下网易是干什么的">        <link>:定义文档与外部资源的关系        <style>:定义内容样式表与页面的关系    2.字体标签        字体标签包括:h1-h6,<font>,<u>,<b>,<strong><em>,<sup>,<sub>        h1-h6:定义标题的大小(h1-h6从大到小),具备align属性,属性值能够是:center,left,right            <h1 align="center">火车票</h1>            <h2 align="left">火车票</h2>            <h3 align="right">火车票</h3>            <h4>火车票</h4>            <h5>火车票</h5>            <h6>火车票</h6>        <strong>:加粗            <strong>火车票</strong>        <u>:加下划线            <u>火车票</u>        <i>:斜体            <i>火车票</i>        <em>:斜体            <em>火车票</em>        <sup>:上标        <sub>:下标            5<sup>2</sup>            4<sub>3</sub>        <br>:换行            火车票<br>zdfsdf        <del>:删除线            <del>79</del>        <hr>:画一条横线    3.特殊字符:        &nbsp:空格        &lt:小于号        &gt:大于号        &copy:版权            火&nbsp车&lt票&gt&copy(直接连起来用就行)        更多特殊字符:http://tool.chinaz.com/Tools/HtmlChar.aspx    4.排版标签:      HTML的标签是分等级的,HTML将全部的标签分为两级:      文本级标签:p,span,a,b,i,u,em  文本标签里只能放文字图片和表单元素      容器级标签:div,h系列,li,dt,dd  容器级标签里能够听任何东西        段落标签:<p>,有aligen属性,属性值包括:left,center,right            <p align="center">段落一</p>            <p>段落二</p>            ***p标签是一个文本级标签        块级标签:<div>,<span>            div的语义是分割,span的语义是范围,跨度            <span>和<div>的区别:<span>是不换行的,<div>是换行的,div是用来划分大的区域的,span是用来划分小的区域的            <div>连用时,行与行之间没有间隙,<p>连用时,行与行之间有间隔    5.超连接        <a> 具备herf,id,class,title属性,  a是一个文本级标签            <a href="http://www.baidu.com" id='ancher' class='foot',title='欢迎你'>百度一下</a>            这里面的id是不能够重复的,class是能够重复的,title鼠标在上面悬浮时,过一段时间就会显示的东西,title是每个标签都具备的属性    6.图片标签        <img>具备src,weight,height,title,align,alt属性            <img src=".\18.jpg" alt="很差意思放出来" height="100">                src 是要打开的图片,已用绝对路径,也能够用相对路径,也能够用网上的路径                alt 是图片显示不出来时,显示出来的文字                height 是图片的高度,也有宽度weight属性,同时使用时要注意比例,不要失真,单个使用时,自动调整比例,宽和高的单位都是px            html中：        分类:            (1).行内标签                （1）在一行内显示  span  strong em i del a                 (2)不能设置宽高  默认的宽和高 是内容填充                1.1 行内块标签 img input                    (1) 在一行内显示                    (2) 能够设置宽高            (2).块级标签  div p h1~h6                （1）独占一行                （2）能够设置宽高,若是不设置宽和高，默认的宽是父亲的100%。高度是内容的高度    7.表单        <form>            <div>                <form action="http://www.baidu.com/s">                    <input type="text" name="wd" value="杨丞琳">                    <input type="submit" value="搜索">                </form>            </div>            <div>                <form action="http://www.baidu.com/s">                    <input type="text" name="wd" value="">                    <input type="password" name="pwd" value="">                    <input type="submit" value="搜索">                </form>            </div>