HTML真零基础教程

时间  2019-12-19
标签 html 零基础 教程 栏目 HTML 繁體版
原文   原文链接

这是为彻底没有接触过的童鞋写的，属于真正的傻瓜式教程，固然因为本人也不是什么大佬，可能有些知识的理解与本身想的不同，若是有大佬看到，还请帮我指出。如下主要是HTML5的基础标签的使用。javascript

开发前的准备

预备知识

HTML全称Hypertext Marked Language，便是超标记文本语言，不是编程语言。php

HTML文件就是网页文件，网页文件自己是一种文本文件，经过在文本文件中添加标记符，能够告诉浏览器如何显示其中的内容。css

浏览器按顺序阅读网页文件，而后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，也就是不会报错，并且不会中止执行过程，开发者只能经过显示效果来分析出错缘由和出错部位。html

对于不一样的浏览器，对同一标记符可能会有不彻底相同的解释，于是可能会有不一样的显示效果。前端

HTML5 是现在的最新版，以前还有什么HTML4，HTML3这些，不过现在已通过时，如今用的基本是HTMML5。在这更新的过程当中，HTML5新增了一些新的内容，也废弃了HTML4的一些内容，由于是第五次修改，因此叫HTML5。java

开发环境

HTML的开发环境很简单，一个文本编辑器和一个浏览器便可。web

正所谓工欲善其事，必先利其器，虽然HTML用记事本也是能够写，但太慢了，并且直接打开记事本写完代码再改后缀名为.html是行不通的，正常的作法是先新建记事本，再改后缀名，而后再用记事本打开这个文件，以后就能够编写代码。面试

在这里推荐hbuilder，vs code，sublime text。编程

根据不一样的场景能够选择不一样的编辑器，sublime text 的优势是轻便，安装相应的插件就能够开发相应的语言，但安装插件比较麻烦，因此若是只是小型项目，推荐使用它，若是是大型项目，请使用vs code。canvas

vs code 虽然启动速度相对于 sublime text 慢，但它安装插件容易，并且有内置的终端，大型项目不少时候都须要使用命令行。

hbuilder若是是开发混合APP的话，可使用它

浏览器这里推荐用谷歌浏览器。

2 HTML基础知识

HTML的基本结构

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
    <meta charset="utf-8">
</head>
<body>
    
</body>
</html>

这个是HTML的大体结构，在sublime_text里，只要新建好html文件后，输入html，而后按tab键，便可获得一个大体的结构，最后再本身添加上这段代码便可，<meta charset="utf-8">

接下来，以上面的代码为例，介绍每行代码表明的意义。

<!DOCTYPE html>这个是否是标签，我也不清楚，网上资料有些说是，有些说不是，虽然我我的认为不是，不过这不重要，由于无论是否是标签，它都必须写上、

让浏览器知道这个页面用HTML5这个版本进行编写，固然也能够写成这样<!doctype html>

因此第一行代码就是让浏览器知道这是用HTML5进行编码

至于HTML4，有三种声明，并且都有些差别，不过这都不重要，只要知道这些是HTML4就行，如今没人用HMTL4了，除了很是古老的网页。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

接下来是第二行，是一个标签<html>，不过它应该和第十行的代码</html>一块儿看，它在浏览器上看不到效果的，它告诉浏览器这是一个文档，它限定了文档的起始点和终点。

<head>是头部，至关于人头脑，里面储存的数据大多不会被做为内容显示出来，好比元信息，引入样式表之类的。

<title>这个是标题，一个HTML文档，有且只有一个，它就是浏览器标签上的文字

<meta charset="utf-8">

这个是字符集告诉浏览器用utf-8这个字符集去解析，若是不用，中文会出现乱码，不过像谷歌不会，要用ie浏览器。

可是值得注意的是浏览器会首先尝试从服务的HTTP响应头部(特别是Content-type头部)来肯定字符集，响应头部中声明的字符集，一般优先于文档中指定的字符集。

若是响应头部没有字符集，文档也没有字符集，浏览器本身会为你选择一个字符集，但可能不是你想要的。

<body>这个是身体，主要就是HTML的主体内容了，全部要显示的都是放在这里的。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
</head>
<body>
    全部内容都写在body里
    hello world
    <p>vs code</p>
</body>
</html>

注释

编程语言有注释，标记语言也有本身的注释，注释的内容不会被解析。

<!-- 这个是注释 -->
<!-- 
在这个里面的都是HTML的注释
-->

标签的结构

标签有双标签和单标签。

像body，html这些都是双标签，像meta这就是单标签，也叫自闭合标签，不过单标签仍是较少，之后不是特别说明，就都是双标签。

双标签和单标签都本身的书写规则

<title>标题</title>
<!-- <title> 是起始标签
     </titlt>    是闭合标签
    中间的就是标签的内容
-->

<meta />或<meta>
这种是单标签

虽然就算双标签只写一个浏览器也能正确解析，可是不规范。

标签的属性和值

每一个标签都拥有本身的属性，每一个属性也有本身所拥有的值

属性和值的写法是这样的属性="值"

<meta charset="utf-8" />
charset  这个即是属性
utf-8   这个是值

块级元素、行内元素、行内块元素

块级元素就是独占一行的，且有本身的宽高

<p>
    第一行
</p>
<p>
    第二行
</p>

行内元素会排同在同一行，且没有宽高，宽高由元素的内容决定

<span>在同一行></span><span>在同一行></span>

行内块元素，排在同一行，且有本身的宽高

<button>
    按钮
</button>
<button width="200" height="200">
    按钮
</button>

标签的大小写

HTML对大小写不敏感，大写小写都行，但这里推荐使用小写。

3 标签的基本使用

这里主要写常常用到的，由于标签是在是太多了，只要知道怎么看，其余标签去网站了解就行

标签请参考https://www.runoob.com/tags/ref-byfunc.html

h1~h6

h1,h2,h3,h4,h5,h6这六个分别是一级标题，二级标题，如此类推，直到六级标题

注意：在一个网页中一级标题只能有一个，虽然能够有多个，但不规范。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

p标签

p标签表明文章的段落

<p>这是一个段落</p>

br标签

<br >单标签，表明换行

<p>
    这里是用\n发现换行不了
</p>
<p>
    这里用br<br>发现换行了
</p>
<p>
    你就算这样也换行不了
    换行不了
    会排成一行，只能用br
</p>

hr标签

hr 单标签，水平分割线，和面试官那些hr没有半毛钱关系

<p>
    段落
</p>
<hr>
<p>
    段落
</p>

实体字符

编程语言有转义字符，标记语言有实体字符，一些没法显示的符号都是用实体字符来代替，好比<、>还有空格

<p>
    我这里写了                  不少的空格，可真正显示出来的只有一个空格，怎么搞，就要用实体符号
</p>
<!-- &nbsp; 是 空格的实体符号 -->
<p>
    写多少个&nbsp;就有多少个空格，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分号不要省，浏览器不会把实体字符显示出来的，至关于编程语言里的转义字符。
</p>

如下是经常使用的实体字符，另外还有什么数学符号的实体字符，希腊字母的实体字符，想要知道自行查看

https://www.runoob.com/tags/html-symbols.html

经常使用字符以及HTML实体 描述以及说明
&nbsp; 空格咱们使用最多的空格，也就是按下space键产生的空格
&ensp; 空格占据的宽度正好是1/2个中文宽度
&emsp; 空格占据的宽度正好是1个中文宽度
&thinsp; 空格占据的宽度比较小
&times; 叉叉×
&laquo; «
&raquo; »
&lt; 小于号<
&gt; 大于号>
&amp; 和号&
&#39;IE支持或&apos;IE不支持 ''单引号
&quot; ""双引号
&copy; 版权©
&reg; 注册商标®

div标签

div是容器，没有任何特殊的效果，不像什么a标签，img同样有特殊的做用

也不是语义化标签，但仍是很经常使用的

div就像ps里面的组同样，不少个有些关系的图层，会把它塞到组里面，这个组也就是div了。

<div>
    <p>
        段落
    </p>
    
    <a href="#">连接</a>
    <p>
        上面的href="#" 跳转的就是当前页面
    </p>
</div>

span标签

span 是行内元素

<p>
    <span>待</span>
    <span>到</span>
    <span>阴</span>
    <span>阳</span>
    <span>逆</span>
    <span>转</span>
    <span>时</span>
    <br />
    <span>以</span>
    <span>我</span>
    <span>魔</span>
    <span>血</span>
    <span>染</span>
    <span>靑</span>
    <span>天</span>
</p>

块级元素能够包裹行内元素，但行内元素不能包裹块级元素，如下代码是错误的

<span>
    <p>
        仙路尽头谁为峰，一见无始道成空
    </p>
</span>

经常使用文本标签

i 斜体 i 斜体 如今是个语义化标签了，通常用来表示分类设计，一个技术术语，一种思想，一个习惯短语或者某种其余的文本。

b 粗体 b 粗体  用来在字面上和常规的内容形式区分开来，而没有传达任何额外的重要性，好比用于关键字，产品名称或其余内容。

del 定义被删除的文本 del 定义被删除的文本

s 定义有删除线的文本 s 定义有删除线的文本

ins 插入文本 ins 插入文本

u 下划线 u 下划线

虽然从表现看 u和ins，del和s的效果同样，但表明的意义不一样

sub 定义下标文本

log2 代码以下

<b>log<sub>2</sub></b>

sup 定义上标文本

22 代码以下

<b>2<sup>2</sup></b>

kbd 键盘文本 ctrl 不过这个标签已经废弃

code 计算机代码文本 String srt = "hello world"

abbr 定义缩写

The WHO was founded in 1948.

<p>The <abbr  title="World Health Organization">WHO</abbr> was founded in 1948.</p>
这个title属性是当鼠标放上去时就会出现它的内容

bdo 定义文字的书写方向

该段落文字从左到右显示。

该段落文字从右到左显示。

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

dir 是 bdo的 属性，它有两个值ltr，rtl 默认是ltr从左到右显示

pre 格式化文本，在这个标签里面回车符换行就真的换行了，按多少个空格就是多少个空格

 #include <stdio.h>
 //在HTML里尖括号要用实体符号才能显示
// #include 
 
 
 
 
  
  
  
  

void main(){
    print('hello world!我还没彻底忘记C语言');
    return 0;
}


 
 
 
 
<pre>
 #include &lt;stdio.h&gt;
 //在HTML里尖括号要用实体符号才能显示
// #include <stdio.h>

void main(){
    print('hello world!我还没彻底忘记C语言');
    return 0;
}
</pre>

mark 自带背景色 hello world

<mark>hello world</mark>

em和strong

em表示内容的强调点

strong表示内容的重要性

连接

img标签

img 这是个单标签。用于引入图片

<img src="图片的地址" alt="尽可能写，这个是当图片没法加载出来时，替代图片的文字，一般是描述这张图片的一些信息，特别是服务于视障人士，看不到图片，屏幕阅读器会根据这个属性将信息读出来"/>
  • 图片地址
    • 图片地址能够是网络地址，也能够是相对地址或绝对地址
    • 网络地址，也就是把src连接到网络上的一张图片,好比http://img30.360buyimg.com/pop/s590x470_jfs/t1/103818/1/3435/68180/5ddfce2aE65a56f1a/5cee70f6872aa9d9.jpg.webp，这个是我在写这个的时候在京东轮播图上的某张图片的地址，将这个地址给src="http://img30.360buyimg.com/pop/s590x470_jfs/t1/103818/1/3435/68180/5ddfce2aE65a56f1a/5cee70f6872aa9d9.jpg.webp"那么网页就会出现这张图片，前提是你看的时候，京东还有这张图片
    • 相对地址
      • 假设你有以个文件夹A，在文件夹A里面有index.html和1.png图片，那么相对地址的引用就是 src="./1.png" 这个./是表明这个文件的根目录，也就是文件夹A
      • 若是是文件夹A里面有文件夹B和C，B里面有1.png，C有index.html，那么相对地址的引用是这样的src="../B/1.png" 这个../是表明上一级目录，index.html文件所在的目录的上一级目录，就是A,而后再来找下面的B，再找B中的图片 ../../就是上一级的上一级目录
    • 绝对地址就是，直接从盘符开始，如C://xxx/xxx/1.png
  • src应用图片的格式
    • png-8，png-24，jpeg也就是jpg，gif，svg，webp，base64
    • webp是一种更牛逼的图片格式，在同等质量下，要比jpg小40%
    • base64严格来讲不是图片，它是图片通过转码，变成一堆字符

a标签

a 超连接，连接网页用的，能够连接网址，也能够是本身项目的网页文件

<a href="https://www.baidu.com/">百度</a>

这是连接百度的网址

一样的a标签页能够用相对地址或绝对地址，连接本身的html文件

<a href="./login.html">注册</a>

通常状况下a标签跳转不会打开新的标签页跳转的，能够经过添加属性，使其打开新的标签页跳转

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

a标签还有一个download，它是让人下载东西的，不过这个属性，如今只有谷歌和火狐支持，其余浏览器都不能用，固然，a标签还有其余的属性，不过没怎么用，就不说了。

<a href="下载地址" download>

图片连接，a标签是特例，虽然是行内元素，但能够包裹块级元素，不仅是图片，也能够包裹标题h1-h6。

<a href="某某地址"><img src="图片地址" /></a>

还有另外个可能会用到的功能，锚点，这个是页面内的超连接，在页面上点击某个的文本，会直接跳转到该页面关于这个文本设置的锚点，具体代码以下

首先是设置锚点
<a href="#content">锚点A</a>
<a href="#content1">锚点B</a>

br换行，主要让浏览器出现滚动条，让内容到底部，有个表现的效果
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

这里的id属性的值要和你锚点定义的值同样，这样才会滚动到这个地方，网上说id换成name属性也同样，但我试了下没用
<div id="content">
    文本A
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="content1">
    文本B
</div>

link标签

link 这个是单标签，定义文档与外部资源的关系，一般是连接CSS样式表的

<link rel="stylesheet" type="text/css" href="theme.css">
href 就是css文件的地址，href="theme.css"和href="./theme.css"没什么区别

link写在head里

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
    
</body>
</html>

如何在浏览器标签卡里弄上本身的logo

代码以下

<link rel="shortcut icon" href="//static.runoob.com/images/favicon.ico"  type="image/x-icon" >

把href的地址换成本身的logo的地址，后缀名要ico的，大小差很少是36px或72px

表格标签

table 定义一个表格

th 表头单元格

tr 单元行

td单元格

caption 表格的标题

thead表格的头部

tbod 表格的主体内容

tfoot 表格的脚注

虽然表格的头部，主体内容，脚注不写也没什么影响，但最好仍是写

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>表头单元格</th>
            <th>表头单元格</th>
            <th>表头单元格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">单元格</td>
        </tr>
    </tfoot>
</table>

以上的表格没有边框，要想有边框，只要给table加个border属性便可

<table border="1px">
    <caption>表格的标题</caption>
    <tr>
        <th>表头单元格</th>
        <th>表头单元格</th>
        <th>表头单元格</th>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>

这时由于每一个单元格和整个表格都有边框，看起来就是两层边框，因此能够合并边框

给table加上以下样式

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        table{
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table border="1px" >
        <caption>表格的标题</caption>
        <tr>
            <th>表头单元格</th>
            <th>表头单元格</th>
            <th>表头单元格</th>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    <!-- <script type="text/javascript" src="./index.js"></script> -->
</body>
</html>

合并单元格

td的属性colspan

colspan = "3"表明该单元格横跨了三个单元格，包括自己三个，也就是将三个单元格合并

<table border="1px" >
        <caption>表格的标题</caption>
        <tr>
            <th>表头单元格</th>
            <th>表头单元格</th>
            <th>表头单元格</th>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td colspan="3">合并单元格</td>
        </tr>
    </table>

有跨列的单元格，天然有跨行的单元格

rowspan ="3"

<table border="1px" >
    <caption>表格的标题</caption>
    <tr>
        <th>表头单元格</th>
        <th>表头单元格</th>
        <th>表头单元格</th>
    </tr>
    <tr>
        <!-- 由于单元格跨了两行，本身一行，下面一行，因此下面的单元行的一个单元格被占用了 -->
        <td rowspan="2">单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>

表单

from 表单

input 输入框，这是个单标签

textarea 多行输入框，也叫输入域

button 按钮

select 下拉列表

option 下拉列表的选项

optgroup 下拉列表选项的组

label 标注，主要和单选按钮或复选框一块儿使用

表单的元素差很少就是这些，不过看上去好像没有单选按钮这些，这不是忘写了，它属于input

表单与表格不一样，像input，button，select等虽然被一块儿归类于表单元素，但它们不须要放在from里面，能够单独出现，可是表格的tr，td必定要放在table里面

表单的主要用途，实际上是注册，登陆那块，填写相关信息，提交后表单就会传给后台，后台在一顿神操做，最后将处理结果返回给前端处理。

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>
  • action
    • 这个是提交表单时像何处提交数据，在这里它的值是一个后台文件，就是项目里有这个php文件，将表单交给这个文件处理，php经过name这个属性获取input输入的值
  • method
    • 这个是表单提交的方式，提交方式主要有两种，get和post
    • 它们的区别是，get对数据没有保密，而post对提交的数据会保密
    • 相似以下网址是get方式提交的
    • http:www.xxxxxxx.com?fname="xxx"&lname="sss"
    • 像这网址?后面的就是表单提交的参数，若是是重要的消息好比用户名密码这些，用get提交的话，也会显示在网址后面，这很明显是不行的，因此就要用post方式提交，就不会有这一大串的字符了。

input的类型

input 这个是个很重要的标签，虽然大部分都叫它输入框，但它的做用不只仅只是输入框，能够是单选框，复 选框，日期选择器等等，这些取决于它type属性的值

<input type="text" />这是文本输入框
<br /> 
<input type="password" />这是密码输入框
<br />
<input type="radio" />这是单选按钮
<br />
<input type="checkbox" />这是复选框，也就是多选按钮
<br />
<input type="button" />这是按钮，不过与button这个标签差很少
<br />
<input type="submit" />这是提交按钮，点击后会默认将表单提交，不过若是没有后台提交了也没啥用
<br />
<input type="reset" />这个是重置按钮，就是将表单的输入框的内容所有清空从新填写
<br />
<input type="range" />这个是调节数字的拉杠，就是电脑上调音量的那个控件，不过原生的比较丑，能够本身                      之后实现这些功能
<br />
<input type="date" /> 这个是日期选择器
<br />
<input type="time" /> 这个是时间选择器
<br />
type的值不少，不过主要的都在这，其余想了解的，能够去这里看
https://www.runoob.com/tags/att-input-type.html
<br />

并且原生的有些确实美观不怎样，有设计基础，等js学精了，其实能够本身弄一个属于本身的UI库

input的value属性和placeholder属性

<input type="button" value="按钮"/> value是input的是值，在按钮上就是按钮的文本，在text上就是输                                    入框的文本
<br />
不过按钮的话大可能是直接使用这个button这个标签
<br />
<button>按钮</button>
<br />
placeholder 属性  这个是输入框的提示文本
<br />
<input type="text" placeholder="请输入用户名"/>
<input type="passwork" placeholder="请输入密码"/>

单选框的用法

<p>
    这样写的话，其实和多选没啥区别，两个均可以选中
</p>
男 <input type="radio" /> 女 <input type="radio" />
<p>
    加个name属性就好了，属性的值要同样的
</p>
男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>

<p>
    属性值不必定是要sex，主要是有见名之意，尽可能取英文的，流下没学好英语的泪水，不过所以本身在计算机的词汇量也增多了
</p>
<input type="radio" name="sex1"/> 女 <input type="radio" name="sex1"/> 人妖 <input type="radio" name="sex1"/>

<p>
    等到js时候再来讲下表单的操控和取值的问题
</p>

label的用法

label标签，这主要是和单选框和多选框进行绑定

男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>
<p>
    像这样写的话，要点击单选按钮才能够选中，用户体验不太好
</p>
换成这样
<label for="man">男</label>
<input type="radio" name="sex" id="man" value="男"><br>
<label for="wumen">女</label>
<input type="radio" name="sex" id="wumen" value="wumen"><br>

这种的话，点击label的文本，单选按钮也会被选中
label的for属性的值要和input的id属性的值同样，才能生效
固然也能够和多选框绑定，用法是同样的

select的用法

只有一个select标签是不够的，它要和option一块儿用

<select>
    <option value="A">下拉选项1</option>
    <option value="B">下拉选项2</option>
    <option value="C">下拉选项3</option>
    <option value="D">下拉选项4</option>
    <option value="E">下拉选项5</option>
    <option value="这个是送往服务器的值">这里的是浏览器显示的文本，也就是用户看到的文本</option>
</select>
<p>
    上面的下拉列表默认显示的是第一个选项，若是要默认选择其余选项，要用selected属性
</p>
<select>
    <option value="A">下拉选项1</option>
    <option value="B">下拉选项2</option>
    <option value="C">下拉选项3</option>
    <option value="D" selected >下拉选项4</option>
    <option value="E">下拉选项5</option>
</select>
<p>
    这样默认显示的就是下拉选项4了
</p>

optgroup的用法

将同类型的option归类为一组

<select>
    <optgroup label="动物">
        <option value="cat">猫</option>
        <option value="dog">狗</option>
    </optgroup>
    <optgroup label="颜色">
        <option value="blue">蓝色</option>
        <option value="yellow">黄色</option>
    </optgroup>
</select>
<p>
   这里的label是属性，和那标签的label没有任何关系，它表明的这个组的文本
</p>

textarea的用法

<textarea rows="10" cols="30" placeholder="请填写详细内容">
    rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>

表单控件的经常使用属性

  • required 这个能够用在input和textarea，表示必填项，不过这个属性IE和safari不支持，考虑兼容性问题，能够用js判断表单的到底有没有彻底填写，safari是苹果的浏览器
<textarea rows="10" cols="30" placeholder="请填写详细内容" required>
    rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>
在这里补充一下，有些属性为何直接写属性名就能够，不用值呢？由于这个属性是布尔值

<textarea rows="10" cols="30" placeholder="请填写详细内容" required="required">
    rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>
  • readonly 只读属性，不能编辑内容，但能够复制内容，适用input和textarea
<textarea rows="10" cols="30" placeholder="请填写详细内容" readonly>
    rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>
  • disabled 禁用，不能编辑也不能复制，基本表单的控件都有这个属性，按钮和下拉列表禁用就没法点击了
<textarea rows="10" cols="30" placeholder="请填写详细内容" disabled>
    rows是行，cols是列，综合起来就是这个输入域的宽高了
</textarea>

列表

列表分为有序列表，无序列表，自定义列表

有序列表

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

上面的列表的项目符号默认是数字符号，以下所示

  1. 列表项
  2. 列表项
  3. 列表项

原本li标签有个type属性，这个就是用来决定列表项的项目符号的，不过因为已经被废弃了，但其实仍是能用，只不过推荐用CSS样式表来修饰这些项目符号

这里简单说下标签li的type的值

<ol>
    <li type="1">阿拉伯数字</li>
    <li type="A">英文字母</li>
    <li type="a">英文字母</li>
    <li type="I">罗马数字</li>
    <li type="i">罗马数字</li>
</ol>

上面的写法是为了方便写属性的值，真正的写法是这样的
<ol>
    <li type="A">列表项</li>
    <li type="A">列表项</li>
    <li type="A">列表项</li>
    <li type="A">列表项</li>
    <li type="A">列表项</li>
</ol>

这样会以A,B,C,D这样的

无序列表

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

无序列表的项目符号默认为黑色的小圆点

一样也能够用type来改变

<ul>
    <li type="disc">列表项</li>
    <li type="square">列表项</li>
    <li type="circle">列表项</li>
</ul>

自定义列表

dl 定义一个自定义列表

dt 项目名称

dd 项目描述

<dl>
    <dt>石昊</dt>
        <dd>
         完美世界的男主，专断万古的荒天帝，然而身边的人都死关了，一个悲剧的男主，现在在上苍之上寻找复活他人的办法。
        </dd>
    <dt>萧炎</dt>
        <dd>
            无尽火域，万火焚苍穹的萧斗帝，老实说我并不太喜欢这我的物，可能做者塑造的很差，记得一开始看的时候，主角是做为上班族穿越，后来好像这部分被改掉了，但先入为主的观念，一个成年人，虽然当时身体也才四，五岁，但心理但是成年人，居然去猥琐一个幼女，幼女的护卫还没发现，这简直就是败笔，不只如此，性格也不太喜欢，并且本身的许的诺言没有实现，说好的复活他祖宗，到大结局都没复活。。。好吧，角色无罪，一切都是做者的锅，但人物形象没有设计好，这是个事实，并且整本书的剧情，陷入了循环，挨打，变强，装逼打脸，每一个大剧情基本是这样，有种审美疲劳的感受。
        </dd>
</dl>

结构化标签

header 网页的头部，一般包括网站标志，主导航，全站连接及其搜索框

nav 标记导航，仅对文档中重要的连接群使用

main 页面的主要内容，一个页面只能使用一次，若是是web应用，则包围其主要功能

acticle 定义外部的内容，其中的内容独立于文档的其他部分

section 定义文档中的节，好比章节，页眉或文档中的其余部分

aside 定义其所处内容以外的内容，如侧栏，文章的一组连接，广告，友情连接，相关产品列表等

footer 页脚，当父级是body时，才是整个页面的页脚

之前的布局都是div+css的布局，如今能用语义化标签就用语义化标签，布局也是从语义化标签考虑，虽然div和p均可以显示段落，但p标签是语义化标签，因此选择p标签，若是内容找不到合适的标签，那就用div包裹吧。

媒体标签

媒体标签主要是音频和视频的标签

音频

<!-- autoplay 音频文件加载完成后自动播放音频 control 控制器 这两个能够不使用，但src是必定要用的-->
<audio src="音频地址" autoplay control></audio>

视频

<!-- autoplay 视频文件加载完成后自动播放音频 control 控制器 这两个能够不使用，但src是必定要用的-->
<video src="视频的地址" autoplay control></video>

其余操做须要用到javaScript就很少说了

画布

这个就是让浏览器拥有绘画的能力，由于要用到javaScript，因此也很少说了，不过这个是能够代替flash的一个方案，也是游戏开发的基础，根据API的不一样，能够绘制2d和3d的图像

<canvas>
    您的游览器不支持画布
</canvas>

框架

在网页中插入网页
<iframe src="网页地址">
    
</iframe>

语义化标签

为何要是使用语义化标签

  • 结构更好，更利于SEO优化
  • 维护性高
  • 有利于特殊终端的阅读

语义化标签一览

虽然可能不全，但大部分都在这里

标签 意义
title 浏览器的标签卡标题
h1~h6 分级标题
ol 有序列表
ul 无序列表
header 网页的头部，一般包括网站标志，主导航，全站连接及其搜索框
nav 标记导航，仅对文档中重要的连接群使用
main 页面的主要内容，一个页面只能使用一次，若是是web应用，则包围其主要功能
acticle 定义外部的内容，其中的内容独立于文档的其他部分
section 定义文档中的节，好比章节，页眉或文档中的其余部分
aside 定义其所处内容以外的内容，如侧栏，文章的一组连接，广告，友情连接，相关产品列表等
footer 页脚，当父级是body时，才是整个页面的页脚
small 小号字体，指定细则，输入免责声明，注释，著名，版权
strong 强调文本的重要性
em 强调文本的内容
mark 使用黄色突出显示文本
p 段落
cite 表示所包含的文本对某个参考文献的引用，好比书籍或者杂志的标题
blockquoto 快引用
q 短的引用
time 定义时间
abbr 简写
dfn 定义术语元素，定义必须紧挨着，能够在描述列表dl元素中使用
address 做者，相关人士或组织的联系信息
del 移除的内容
ins 添加的内容
code 标记代码
meter 定义已知范围或分数值内的标量测量
progress 定义进度条

两个可能会用到的属性

data-*属性

data-*，*表明任何字符，如data-music，data-id，它能够储存数据，如把每首歌的id做为值给保存到data-id属性里。

contenteditable

让页面可编辑

<div contenteditable>ssss</div>
        <ul contenteditable>
            <li>sss</li>
            <li>sss</li>
            <li>sss</li>
        </ul>
        <p contenteditable>sss</p>

以上标签的用法基本就到这里，虽然还有像拼音这些的标签，但不怎么用吧，就没写了，其他的想了解就到w3c或者菜鸟教程那查看吧。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程