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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>网页标题</title>
  5. 	<meta charset="utf-8">
  6. </head>
  7. <body>
  9. </body>
  10. </html>

这个是HTML的大致结构，在sublime_text里，只要新建好html文件后，输入html，然后按tab键，即可得到一个大致的结构，最后再自己添加上这段代码即可，<meta charset="utf-8">

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

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

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

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

至于HTML4，有三种声明，而且都有些差异，不过这都不重要，只要知道这些是HTML4就行，现在没人用HMTL4了，除了非常古老的网页。

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

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

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

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

  1. <meta charset="utf-8">

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title></title>
  5. 	<meta charset="utf-8">
  6. </head>
  7. <body>
  8.     所有内容都写在body里
  9. 	hello world
  10.     <p>vs code</p>
  11. </body>
  12. </html>

注释

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

  1. <!-- 这个是注释 -->
  2. <!--
  3. 在这个里面的都是HTML的注释
  4. -->

标签的结构

标签有双标签和单标签。

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

双标签和单标签都自己的书写规则

  1. <title>标题</title>
  2. <!-- <title> 是起始标签
  3.      </titlt>    是闭合标签
  4. 	中间的就是标签的内容
  5. -->
  7. <meta />或<meta>
  8. 这种是单标签

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

标签的属性和值

每个标签都拥有自己的属性，每个属性也有自己所拥有的值

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

  1. <meta charset="utf-8" />
  2. charset  这个便是属性
  3. utf-8   这个是值

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

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

  1. <p>
  2.     第一行
  3. </p>
  4. <p>
  5.     第二行
  6. </p>

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

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

行内块元素，排在同一行，且有自己的宽高

  1. <button>
  2.     按钮
  3. </button>
  4. <button width="200" height="200">
  5.     按钮
  6. </button>

标签的大小写

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

3 标签的基本使用

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

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

h1~h6

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

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

  1. <h1>一级标题</h1>
  2. <h2>二级标题</h2>
  3. <h3>三级标题</h3>
  4. <h4>四级标题</h4>
  5. <h5>五级标题</h5>
  6. <h6>六级标题</h6>

p标签

p标签代表文章的段落

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

br标签

<br >单标签，代表换行

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

hr标签

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

  1. <p>
  2.     段落
  3. </p>
  4. <hr>
  5. <p>
  6.     段落
  7. </p>

实体字符

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

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

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

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

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

div标签

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

也不是语义化标签，但还是很常用的

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

  1. <div>
  2.    	<p>
  3.         段落
  4.     </p>
  6.     <a href="#">链接</a>
  7.     <p>
  8.         上面的href="#" 跳转的就是当前页面
  9.     </p>
  10. </div>

span标签

span 是行内元素

  1. <p>
  2.     <span>待</span>
  3.     <span>到</span>
  4.     <span>阴</span>
  5.     <span>阳</span>
  6.     <span>逆</span>
  7.     <span>转</span>
  8.     <span>时</span>
  9.     <br />
  10.     <span>以</span>
  11.     <span>我</span>
  12.     <span>魔</span>
  13.     <span>血</span>
  14.     <span>染</span>
  15.     <span>靑</span>
  16.     <span>天</span>
  17. </p>

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

  1. <span>
  2. 	<p>
  3.         仙路尽头谁为峰，一见无始道成空
  4.     </p>
  5. </span>

常用文本标签

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

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

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

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

ins 插入文本 ins 插入文本

u 下划线 u 下划线

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

sub 定义下标文本

log2 代码如下

  1.  <b>log<sub>2</sub></b>

sup 定义上标文本

22 代码如下

  1. <b>2<sup>2</sup></b>

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

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

abbr 定义缩写

The WHO was founded in 1948.

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

bdo 定义文字的书写方向

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

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

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

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

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

  1.  #include <stdio.h>
  2.  //在HTML里尖括号要用实体符号才能显示
  3. // #include 
  4.  
  5. void main(){
  6. 	print('hello world!我还没完全忘记C语言');
  7. 	return 0;
  8. }
  1. <pre>
  2.  #include &lt;stdio.h&gt;
  3.  //在HTML里尖括号要用实体符号才能显示
  4. // #include <stdio.h>
  6. void main(){
  7. 	print('hello world!我还没完全忘记C语言');
  8. 	return 0;
  9. }
  10. </pre>

mark 自带背景色 hello world

  1. <mark>hello world</mark>

em和strong

em表示内容的强调点

strong表示内容的重要性

链接

img标签

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

  1. <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 超链接，链接网页用的，可以链接网址，也可以是自己项目的网页文件

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

这是链接百度的网址

同样的a标签页可以用相对地址或绝对地址，链接自己的html文件

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

一般情况下a标签跳转不会打开新的标签页跳转的，可以通过添加属性，使其打开新的标签页跳转

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

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

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

图片链接，a标签是特例，虽然是行内元素，但可以包裹块级元素，不只是图片，也可以包裹标题h1-h6。

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

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

  1. 首先是设置锚点
  2. <a href="#content">锚点A</a>
  3. <a href="#content1">锚点B</a>
  5. br换行，主要让浏览器出现滚动条，让内容到底部，有个表现的效果
  6. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  7. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  8. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  9. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  10. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  11. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  13. 这里的id属性的值要和你锚点定义的值一样，这样才会滚动到这个地方，网上说id换成name属性也一样，但我试了下没用
  14. <div id="content">
  15.     文本A
  16. </div>
  18. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  19. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  20. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  21. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  22. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  23. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  25. <div id="content1">
  26.     文本B
  27. </div>

link标签

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

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

link写在head里

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>网页标题</title>
  5. 	<meta charset="utf-8">
  6.     <link rel="stylesheet" type="text/css" href="theme.css">
  7. </head>
  8. <body>
  10. </body>
  11. </html>

如何在浏览器标签卡里弄上自己的logo

代码如下

  1. <link rel="shortcut icon" href="//static.runoob.com/images/favicon.ico"  type="image/x-icon" >
  3. 把href的地址换成自己的logo的地址，后缀名要ico的，大小差不多是36px或72px

表格标签

table 定义一个表格

th 表头单元格

tr 单元行

td单元格

caption 表格的标题

thead 表格的头部

tbod 表格的主体内容

tfoot 表格的脚注

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

  1. <table>
  2.     <caption>表格的标题</caption>
  3.     <thead>
  4.     	<tr>
  5.             <th>表头单元格</th>
  6.             <th>表头单元格</th>
  7.             <th>表头单元格</th>
  8.         </tr>
  9.     </thead>
  10.     <tbody>
  11.     	<tr>
  12.             <td>单元格</td>
  13.             <td>单元格</td>
  14.             <td>单元格</td>
  15.         </tr>
  16.         <tr>
  17.             <td>单元格</td>
  18.             <td>单元格</td>
  19.             <td>单元格</td>
  20.         </tr>
  21.     </tbody>
  22.     <tfoot>
  23.     	<tr>
  24. 	        <td colspan="3">单元格</td>
  25. 	    </tr>
  26.     </tfoot>
  27. </table>

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

  1. <table border="1px">
  2.     <caption>表格的标题</caption>
  3.     <tr>
  4.         <th>表头单元格</th>
  5.         <th>表头单元格</th>
  6.         <th>表头单元格</th>
  7.     </tr>
  8.     <tr>
  9.         <td>单元格</td>
  10.         <td>单元格</td>
  11.         <td>单元格</td>
  12.     </tr>
  13.     <tr>
  14.         <td>单元格</td>
  15.         <td>单元格</td>
  16.         <td>单元格</td>
  17.     </tr>
  18. </table>

这时因为每个单元格和整个表格都有边框，看起来就是两层边框，所以可以合并边框

给table加上如下样式

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title></title>
  5. 	<meta charset="utf-8">
  6. 	<style type="text/css">
  7. 		table{
  8. 			border-collapse: collapse;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<table border="1px" >
  14. 	    <caption>表格的标题</caption>
  15. 	    <tr>
  16. 	        <th>表头单元格</th>
  17. 	        <th>表头单元格</th>
  18. 	        <th>表头单元格</th>
  19. 	    </tr>
  20. 	    <tr>
  21. 	        <td>单元格</td>
  22. 	        <td>单元格</td>
  23. 	        <td>单元格</td>
  24. 	    </tr>
  25. 	    <tr>
  26. 	        <td>单元格</td>
  27. 	        <td>单元格</td>
  28. 	        <td>单元格</td>
  29. 	    </tr>
  30. 	</table>
  31. 	<!-- <script type="text/javascript" src="./index.js"></script> -->
  32. </body>
  33. </html>

合并单元格

td的属性colspan

colspan = "3"代表该单元格横跨了三个单元格，包括本身三个，也就是将三个单元格合并

  1. <table border="1px" >
  2. 	    <caption>表格的标题</caption>
  3. 	    <tr>
  4. 	        <th>表头单元格</th>
  5. 	        <th>表头单元格</th>
  6. 	        <th>表头单元格</th>
  7. 	    </tr>
  8. 	    <tr>
  9. 	        <td>单元格</td>
  10. 	        <td>单元格</td>
  11. 	        <td>单元格</td>
  12. 	    </tr>
  13. 	    <tr>
  14. 	        <td colspan="3">合并单元格</td>
  15. 	    </tr>
  16. 	</table>

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

rowspan ="3"

  1. <table border="1px" >
  2.     <caption>表格的标题</caption>
  3.     <tr>
  4.         <th>表头单元格</th>
  5.         <th>表头单元格</th>
  6.         <th>表头单元格</th>
  7.     </tr>
  8.     <tr>
  9.         <!-- 因为单元格跨了两行，自己一行，下面一行，所以下面的单元行的一个单元格被占用了 -->
  10.         <td rowspan="2">单元格</td>
  11.         <td>单元格</td>
  12.         <td>单元格</td>
  13.     </tr>
  14.     <tr>
  15.         <td>单元格</td>
  16.         <td>单元格</td>
  17.     </tr>
  18. </table>

表单

from 表单

input 输入框，这是个单标签

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

button 按钮 按钮

select 下拉列表

option 下拉列表的选项

optgroup 下拉列表选项的组

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

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

表单与表格不同，像input，button，select等虽然被一起归类于表单元素，但它们不需要放在from里面，可以单独出现，但是表格的tr，td一定要放在table里面

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

  1. <form action="demo_form.php" method="get">
  2.   First name: <input type="text" name="fname"><br>
  3.   Last name: <input type="text" name="lname"><br>
  4.   <input type="submit" value="提交">
  5. </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属性的值

  1. <input type="text" />这是文本输入框
  2. <br />
  3. <input type="password" />这是密码输入框
  4. <br />
  5. <input type="radio" />这是单选按钮
  6. <br />
  7. <input type="checkbox" />这是复选框，也就是多选按钮
  8. <br />
  9. <input type="button" />这是按钮，不过与button这个标签差不多
  10. <br />
  11. <input type="submit" />这是提交按钮，点击后会默认将表单提交，不过如果没有后台提交了也没啥用
  12. <br />
  13. <input type="reset" />这个是重置按钮，就是将表单的输入框的内容全部清空重新填写
  14. <br />
  15. <input type="range" />这个是调节数字的拉杠，就是电脑上调音量的那个控件，不过原生的比较丑，可以自己					  以后实现这些功能
  16. <br />
  17. <input type="date" /> 这个是日期选择器
  18. <br />
  19. <input type="time" /> 这个是时间选择器
  20. <br />
  21. type的值很多，不过主要的都在这，其他想了解的，可以去这里看
  22. https://www.runoob.com/tags/att-input-type.html
  23. <br />
  25. 而且原生的有些确实美观不怎样，有设计基础，等js学精了，其实可以自己弄一个属于自己的UI库

input的value属性和placeholder属性

  1. <input type="button" value="按钮"/> value是input的是值，在按钮上就是按钮的文本，在text上就是输							          入框的文本
  2. <br />
  3. 不过按钮的话大多是直接使用这个button这个标签
  4. <br />
  5. <button>按钮</button>
  6. <br />
  7. placeholder 属性  这个是输入框的提示文本
  8. <br />
  9. <input type="text" placeholder="请输入用户名"/>
  10. <input type="passwork" placeholder="请输入密码"/>

单选框的用法

  1. <p>
  2.     这样写的话，其实和多选没啥区别，两个都可以选中
  3. </p>
  4. 男 <input type="radio" /> 女 <input type="radio" />
  5. <p>
  6.     加个name属性就行了，属性的值要一样的
  7. </p>
  8. 男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>
  10. <p>
  11.     属性值不一定是要sex，主要是有见名之意，尽量取英文的，流下没学好英语的泪水，不过因此自己在计算机的词汇量也增多了
  12. </p>
  13. <input type="radio" name="sex1"/> 女 <input type="radio" name="sex1"/> 人妖 <input type="radio" name="sex1"/>
  15. <p>
  16.     等到js时候再来说下表单的操控和取值的问题
  17. </p>

label的用法

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

  1. 男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>
  2. <p>
  3.     像这样写的话，要点击单选按钮才可以选中，用户体验不太好
  4. </p>
  5. 换成这样
  6. <label for="man">男</label>
  7. <input type="radio" name="sex" id="man" value="男"><br>
  8. <label for="wumen">女</label>
  9. <input type="radio" name="sex" id="wumen" value="wumen"><br>
  11. 这种的话，点击label的文本，单选按钮也会被选中
  12. label的for属性的值要和input的id属性的值一样，才能生效
  13. 当然也可以和多选框绑定，用法是一样的

select的用法

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

  1. <select>
  2.     <option value="A">下拉选项1</option>
  3.     <option value="B">下拉选项2</option>
  4.     <option value="C">下拉选项3</option>
  5.     <option value="D">下拉选项4</option>
  6.     <option value="E">下拉选项5</option>
  7.     <option value="这个是送往服务器的值">这里的是浏览器显示的文本，也就是用户看到的文本</option>
  8. </select>
  9. <p>
  10.     上面的下拉列表默认显示的是第一个选项，如果要默认选择其他选项，要用selected属性
  11. </p>
  12. <select>
  13.     <option value="A">下拉选项1</option>
  14.     <option value="B">下拉选项2</option>
  15.     <option value="C">下拉选项3</option>
  16.     <option value="D" selected >下拉选项4</option>
  17.     <option value="E">下拉选项5</option>
  18. </select>
  19. <p>
  20.     这样默认显示的就是下拉选项4了
  21. </p>

optgroup的用法

将同类型的option归类为一组

  1. <select>
  2.     <optgroup label="动物">
  3.         <option value="cat">猫</option>
  4.         <option value="dog">狗</option>
  5.     </optgroup>
  6.     <optgroup label="颜色">
  7.         <option value="blue">蓝色</option>
  8.         <option value="yellow">黄色</option>
  9.     </optgroup>
  10. </select>
  11. <p>
  12.    这里的label是属性，和那标签的label没有任何关系，它代表的这个组的文本
  13. </p>

textarea的用法

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

表单控件的常用属性

  • required 这个可以用在input和textarea，表示必填项，不过这个属性IE和safari不支持，考虑兼容性问题，可以用js判断表单的到底有没有完全填写，safari是苹果的浏览器
  1. <textarea rows="10" cols="30" placeholder="请填写详细内容" required>
  2. 	rows是行，cols是列，综合起来就是这个输入域的宽高了
  3. </textarea>
  4. 在这里补充一下，有些属性为什么直接写属性名就可以，不用值呢？因为这个属性是布尔值
  6. <textarea rows="10" cols="30" placeholder="请填写详细内容" required="required">
  7. 	rows是行，cols是列，综合起来就是这个输入域的宽高了
  8. </textarea>
  • readonly 只读属性，不能编辑内容，但可以复制内容，适用input和textarea
  1. <textarea rows="10" cols="30" placeholder="请填写详细内容" readonly>
  2. 	rows是行，cols是列，综合起来就是这个输入域的宽高了
  3. </textarea>
  • disabled 禁用，不能编辑也不能复制，基本表单的控件都有这个属性，按钮和下拉列表禁用就无法点击了
  1. <textarea rows="10" cols="30" placeholder="请填写详细内容" disabled>
  2. 	rows是行，cols是列，综合起来就是这个输入域的宽高了
  3. </textarea>

列表

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

有序列表

  1. <ol>
  2.     <li>列表项</li>
  3.     <li>列表项</li>
  4.     <li>列表项</li>
  5. </ol>

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

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

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

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

  1. <ol>
  2.     <li type="1">阿拉伯数字</li>
  3.     <li type="A">英文字母</li>
  4.     <li type="a">英文字母</li>
  5.     <li type="I">罗马数字</li>
  6.     <li type="i">罗马数字</li>
  7. </ol>
  9. 上面的写法是为了方便写属性的值，真正的写法是这样的
  10. <ol>
  11.     <li type="A">列表项</li>
  12.     <li type="A">列表项</li>
  13.     <li type="A">列表项</li>
  14.     <li type="A">列表项</li>
  15.     <li type="A">列表项</li>
  16. </ol>
  18. 这样会以A,B,C,D这样的

无序列表

  1. <ul>
  2.     <li>列表项</li>
  3.     <li>列表项</li>
  4.     <li>列表项</li>
  5. </ul>

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

同样也可以用type来改变

  1. <ul>
  2.     <li type="disc">列表项</li>
  3.     <li type="square">列表项</li>
  4.     <li type="circle">列表项</li>
  5. </ul>

自定义列表

dl 定义一个自定义列表

dt 项目名称

dd 项目描述

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

结构化标签

header 网页的头部，通常包括网站标志，主导航，全站链接及其搜索框

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

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

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

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

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

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

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

媒体标签

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

音频

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

视频

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

其他操作需要用到javaScript就不多说了

画布

这个就是让浏览器拥有绘画的能力，因为要用到javaScript，所以也不多说了，不过这个是可以代替flash的一个方案，也是游戏开发的基础，根据API的不同，可以绘制2d和3d的图像

  1. <canvas>
  2. 	您的游览器不支持画布
  3. </canvas>

框架

  1. 在网页中插入网页
  2. <iframe src="网页地址">
  4. </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

让页面可编辑

  1. <div contenteditable>ssss</div>
  2.     	<ul contenteditable>
  3.     		<li>sss</li>
  4.     		<li>sss</li>
  5.     		<li>sss</li>
  6.     	</ul>
  7.     	<p contenteditable>sss</p>

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

HTML真零基础教程的更多相关文章

  1. Qt零基础教程(四) QWidget详解篇

    在博客园里面转载我自己写的关于Qt的基础教程,没次写一篇我会在这里更新一下目录: Qt零基础教程(四) QWidget详解(1):创建一个窗口 Qt零基础教程(四) QWidget详解(2):QWid ...

  2. Qt零基础教程(四)QWidget详解(3):QWidget的几何结构

    Qt零基础教程(四)  QWidget详解(3):QWidget的几何结构 这篇文章里面分析了QWidget中常用的几种几何结构 下图是Qt提供的分析QWidget几何结构的一幅图,在帮助的 Wind ...

  3. Photoshop零基础教程集锦，助你快速进阶为大佬，轻松、任性！！！

    现今,对于Web或App UI设计师而言,除了不断学习专业知识,提升设计技能.掌握一款得心应手的设计工具(例如设计师们常用的图像处理工具PhotoShop,矢量图绘制工具AI, 图形视频处理工具AE, ...

  4. Memcache教程 Memcache零基础教程

    Memcache是什么 Memcache是danga.com的一个项目,来分担数据库的压力. 它可以应对任意多个连接,使用非阻塞的网络IO.由于它的工作机制是在内存中开辟一块空间,然后建立一个Hash ...

  5. 零基础教程！一文教你使用Rancher 2.3和Terraform运行Windows容器

    本文来自Rancher Labs 介 绍 在Kubernetes 1.14版本中已经GA了对Windows的支持.这一结果凝结了一群优秀的工程师的努力,他们来自微软.Pivotal.VMware.红帽 ...

  6. Java零基础教程（二）基础语法

    Java 基础语法 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如 ...

  7. iOS开发零基础教程之生成git所需的SSH keys

    在我们github看到了一个不错的第三方库时,可能我们想把他git clone到本地,我们需要复制他的SSH URL,如下图: 复制完地址之后,我们需要打开终端,然后输入命令: git clone + ...

  8. Java零基础教程（一）环境搭建

    本文将带领您一步一步地搭建Java开发环境 一.认识什么是Java Java 是由Sun Microsystems公司于1995年5月推出的高级程序设计语言. Java可运行于多个平台,如Window ...

  9. Swift零基础教程2019最新版（一）搭建开发环境

    Swift简单介绍 Swift是苹果强力推荐的新型开发语言,能开发苹果下属所有软件平台(iOS,iPadOS,macOS,watchOS,tvOS)初学者如果想进入苹果的开发体系,从Swift开始学习 ...

随机推荐

  1. ThreadLocal深度解析和应用示例

    开篇明意 ThreadLocal是JDK包提供的线程本地变量,如果创建了ThreadLocal<T>变量,那么访问这个变量的每个线程都会有这个变量的一个副本,在实际多线程操作的时候,操作的 ...

  2. 024.掌握Pod-部署MongoDB

    一 前期准备 1.1 前置条件 集群部署:Kubernetes集群部署参考003--019. glusterfs-Kubernetes部署:参考<附010.Kubernetes永久存储之Glus ...

  3. NPM 源的管理器nrm

    作为一个 NPM 源管理器,nrm允许快速地在如下 NPM 源间切换: 列表项目 npm cnpm strongloop enropean australia nodejitsu taobao Ins ...

  4. Alibaba Nacos 学习（一）：Nacos介绍与安装

    Alibaba Nacos 学习(一):Nacos介绍与安装 Alibaba Nacos 学习(二):Spring Cloud Nacos Config Alibaba Nacos 学习(三):Spr ...

  5. 【01】主函数main

    java和C#非常相似,它们大部分的语法是一样的,但尽管如此,也有一些地方是不同的. 为了更好地学习java或C#,有必要分清它们两者到底在哪里不同. 首先,我们将探讨主函数main. java的主函 ...

  6. python3 之 内置函数range()

    一.语法: range(stop) range(start,stop,step) start:计数从start开始,默认是从0开始.eg:range(5)等价于range(0,5) stop:计数到s ...

  7. Altium Designer 18 画keepout层与将keepout层转换成Mechanical1层的方法

    画keepout的方法 先选中Keepout层:然后 右键->Place->Keepout->然后选择要画圆还是线 Keepout层一般只用来辅助Layout,不能作为PCB的外形结 ...

  8. python的time、datetime和calendar

    datetime模块主要是用来表示日期的,就是我们常说的年月日时分秒,calendar模块主要是用来表示年月日,是星期几之类的信息,time模块主要侧重点在时分秒,从功能简单来看,我们可以认为三者是一 ...

  9. Centos 6、7 禁止密码验证登陆

    Centos 6.7 禁止密码验证登陆 安全方面的考虑,秘钥对验证登陆相对密码验证要更安全 修改 /etc/ssh/sshd_config 配置文件 该配置文件中,只需要修改一个参数 Password ...

  10. 【Python】之format奇技淫巧的输出控制

    前置 环境:Python3.6.5 探讨点:输出print,字符串format控制, % 控制 print基础控制 简单示范: a = 1 b = '@Hello yanshanbei!' print ...