标签:form apt 多行 视频 复制 面试 测量 实现 ati
这是为完全没有接触过的童鞋写的,属于真正的傻瓜式教程,当然由于本人也不是什么大佬,可能有些知识的理解与自己想的不一样,如果有大佬看到,还请帮我指出。以下主要是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的话,可以使用它
浏览器这里推荐用谷歌浏览器。
<!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对大小写不敏感,大写小写都行,但这里推荐使用小写。
这里主要写经常用到的,因为标签是在是太多了,只要知道怎么看,其他标签去网站了解就行
标签请参考https://www.runoob.com/tags/ref-byfunc.html
h1,h2,h3,h4,h5,h6这六个分别是一级标题,二级标题,如此类推,直到六级标题
注意:在一个网页中一级标题只能有一个,虽然可以有多个,但不规范。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
p标签代表文章的段落
<p>这是一个段落</p>
<br >
单标签,代表换行
<p>
这里是用\n发现换行不了
</p>
<p>
这里用br<br>发现换行了
</p>
<p>
你就算这样也换行不了
换行不了
会排成一行,只能用br
</p>
hr
单标签,水平分割线,和面试官那些hr
没有半毛钱关系
<p>
段落
</p>
<hr>
<p>
段落
</p>
编程语言有转义字符,标记语言有实体字符,一些无法显示的符号都是用实体字符来代替,比如<
、>
还有空格
<p>
我这里写了 很多的空格,可真正显示出来的只有一个空格,怎么搞,就要用实体符号
</p>
<!-- 是 空格的实体符号 -->
<p>
写多少个 就有多少个空格, 分号不要省,浏览器不会把实体字符显示出来的,相当于编程语言里的转义字符。
</p>
以下是常用的实体字符,另外还有什么数学符号的实体字符,希腊字母的实体字符,想要知道自行查看
https://www.runoob.com/tags/html-symbols.html
常用字符以及HTML实体 | 描述以及说明 |
---|---|
|
空格我们使用最多的空格,也就是按下space键产生的空格 |
  |
空格占据的宽度正好是1/2个中文宽度 |
  |
空格占据的宽度正好是1个中文宽度 |
  |
空格占据的宽度比较小 |
× |
叉叉× |
« |
? |
» |
? |
< |
小于号< |
> |
大于号> |
& |
和号& |
' IE支持或' IE不支持 |
‘‘单引号 |
" |
""双引号 |
© |
版权? |
® |
注册商标? |
div是容器,没有任何特殊的效果,不像什么a标签,img
一样有特殊的作用
也不是语义化标签,但还是很常用的
div就像ps
里面的组一样,很多个有些关系的图层,会把它塞到组里面,这个组也就是div了。
<div>
<p>
段落
</p>
<a href="#">链接</a>
<p>
上面的href="#" 跳转的就是当前页面
</p>
</div>
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里尖括号要用实体符号才能显示 // #includevoid main(){ print(‘hello world!我还没完全忘记C语言‘); return 0; }
<pre>
#include <stdio.h>
//在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"
那么网页就会出现这张图片,前提是你看的时候,京东还有这张图片src="./1.png"
这个./是代表这个文件的根目录,也就是文件夹Asrc="../B/1.png"
这个../是代表上一级目录,index.html文件所在的目录的上一级目录,就是A,然后再来找下面的B,再找B中的图片 ../../就是上一级的上一级目录png-8,png-24,jpeg也就是jpg,gif,svg,webp,base64
webp
是一种更牛逼的图片格式,在同等质量下,要比jpg小40%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
这个是单标签,定义文档与外部资源的关系,通常是链接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>
php
文件,将表单交给这个文件处理,php
通过name这个属性获取input输入的值http:www.xxxxxxx.com?fname="xxx"&lname="sss"
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 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标签,这主要是和单选框和多选框进行绑定
男 <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标签是不够的,它要和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>
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>
<textarea rows="10" cols="30" placeholder="请填写详细内容" disabled>
rows是行,cols是列,综合起来就是这个输入域的宽高了
</textarea>
列表分为有序列表,无序列表,自定义列表
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
上面的列表的项目符号默认是数字符号,如下所示
本来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>
虽然可能不全,但大部分都在这里
标签 | 意义 |
---|---|
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-music,data-id,它可以储存数据,如把每首歌的id作为值给保存到data-id属性里。
让页面可编辑
<div contenteditable>ssss</div>
<ul contenteditable>
<li>sss</li>
<li>sss</li>
<li>sss</li>
</ul>
<p contenteditable>sss</p>
以上标签的用法基本就到这里,虽然还有像拼音这些的标签,但不怎么用吧,就没写了,其余的想了解就到w3c或者菜鸟教程那查看吧。
标签:form apt 多行 视频 复制 面试 测量 实现 ati
原文地址:https://www.cnblogs.com/tourey-fatty/p/12056390.html