HTML真零基础教程

其他 2019-12-17 20:01:10 阅读次数: 0

这是为完全没有接触过的童鞋写的，属于真正的傻瓜式教程，当然由于本人也不是什么大佬，可能有些知识的理解与自己想的不一样，如果有大佬看到，还请帮我指出。以下主要是HTML5的基础标签的使用。

开发前的准备

预备知识

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

HTML文件就是网页文件，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

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

对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

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

开发环境

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

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

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

根据不同的场景可以选择不同的编辑器，sublime text 的优点是轻便，安装相应的插件就可以开发相应的语言，但安装插件比较麻烦，所以如果只是小型项目，推荐使用它，如果是大型项目，请使用vs code。

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或者菜鸟教程那查看吧。

猜你喜欢

转载自www.cnblogs.com/tourey-fatty/p/12056390.html
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022