01 前端篇（标签）

HTML：

标签：

是由一对尖括号包裹的单词构成

标签不区分大小写

标签分为两部分，开始标签和结束标签 <a></a>

自闭和标签 <br/><hr/><inpt/><img/>

标签可以嵌套，但不能交叉嵌套

所有标签统分为块级标签和内联标签

标签的属性

一组键值对

只能出现在开始标签，自闭和标签

属性名全部小写，属性值必须使用单引号或双引号包裹 name = “lily”

如果属性名和属性值完全一样，则直接写属性名即可。如 readonly

<!DOCTYPE html> ：告诉浏览器以哪种规范
head 标签：

name：主要用于描述网页。 keywords、description

http-equiv：refresh、content-Type、X-UA-Compatible

<title></title>：标题

body标签：

<h1></h1>：从 1 到 6 ；块级标签

<p></p>：段落。换行+隔行；块级标签

<br/>：换行

<hr/>：水平线

<b></b>：给自己加粗

<em></em>：变成斜体

<strike></strike>：去除。

<del></del>：去除

2<sub>3</sub>：下角标

2<sup>3</sup>：上角标

& nbsp; ：表示一个空格

& copy;：版权符号

& lt; ：< 符号

& gt; ： > 符号

<img src=”1.jpg” width=”200px” height=”200px” alt=”hehe” title=”girl”>：自闭和标签,内联标签 alt 是加载失败时显示的内容

<a href=”http://www.baidu.com” target=”_blank” title=”hehe”>百度</a>：1. 超链接 2. 锚(#id)

<div></div>：没有特殊的处理，控制一块。和<p></p>区别是没有隔行

<span></span>：内联标签

块级标签（block）：自己独占一行，即使没有填满。

内联标签（in-line）：和其它元素位于同一行，占的地方取决于文本

列表标签：

<ul></ul> <li></li>： unordered list 无序列表

<ol></ol> <li></li>：有序列表

表格标签：<table border=”1”> : <tr>: <td> <th> 合并单元格 rowspan colspan
表单标签：<form>

表单用于向服务器传输数据

表单属性：

method： get：1.提交的键值对放在url 后面2. 安全性相对较差3. 对提交内容有长度限制； post：1.提交键值对不在地址栏 2. 安全性相对较高 3. 提交内容长度理论上无限制

action：表单提交到哪里

表单元素：

1. <input>：自闭和标签。 type、value、name

2. <select></select>： name、multiple、size

3. <textarea></textarea>：

4. <label for=”www”></label> <input id=”www” type=”text”> label 和 input进行一个关联

div：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div</title><style>div{color: #cc3399;background-color: cadetblue;}span{color: green;background-color: pink;}#div1{color: antiquewhite;height: 500px;background-color: #cc3399;}#div2{height: 500px;background-color: pink;}#div3{height: 500px;background-color: yellow;}</style>
</head>
<body>
hello world
<h1>hello world</h1>
<p>hello world</p>
<!--<div style="color: yellow">hello div</div>-->
hello before<div>hello div</div>hello after
<span>hello span</span>
<b>加粗</b>
<em>斜体</em>
<strike>不建议使用的 strike </strike>
<del>delete</del>
<br>
2<sub>3</sub>
2<sup>3</sup>
hello&nbsp;&nbsp;&nbsp;world   &copy;&lt;h1&gt;
<img src="1.jpg" width="200px" height="200px" alt="hehe" title="girl">
<a href="http://www.baidu.com" target="_blank">百度</a>
<br>
<div id="div_top">top</div>
<a href="#div1">第一章</a>
<a href="#div2">第二章</a>
<a href="#div3">第三章</a><div id="div1">第一章</div><a href="#div_top">返回</a>
<div id="div2">第二章</div><a href="#div_top">返回</a>
<div id="div3">第三章</div><a href="#div_top">返回</a>
</body>
</html>

form：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form</title>
</head>
<body>
<form action="127.0.0.1:8090/index" method="get"><p>姓名：<input type="text" name="username"></p><p>密码：<input type="password" name="password"></p><p><input type="submit" value="submit"></p><p><input type="button" value="button"></p><p>hobby: basketball<input type="checkbox" name="hobby" value="1"></p><p>hobby: volleyball<input type="checkbox" name="hobby" value="2"></p><p>male<input type="radio" name="sex" value="0"></p><p>female<input type="radio" name="sex" value="1"></p><p>upload<input type="file"></p>
</form>
</body>
</html>

list：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>list</title>
</head>
<body>
<ul><li>111</li><li>111</li><li>111</li><li>111</li>
</ul><ol><li>222</li><li>222</li><li>222</li><li>222</li>
</ol><dl><dt>第一章</dt><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dt>第二章</dt><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dt>第三章</dt><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd><dd>lalala</dd>
</dl>
</body>
</html>

转载于:https://www.cnblogs.com/mlllily/p/10348838.html

01 前端篇（标签）相关推荐

element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇（二）：引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
01前端入门HTML5 +Css3+电商网页制作：HTML5
01前端入门HTML5 +Css3+电商网页制作 0. 来源 1. 基础认识 1.1 Web 标准构成 1.2 基本语法 2. vscode使用 3. HTML 3.1 注释 3.2 标签 3.2.1 ...
【前端】nk前端篇-JS能力测评js(1)
nk前端篇-JS能力测评js1 JS JS1 **直角三角形** JS2 **文件扩展名** JS3 **分隔符** JS4 **单向绑定** JS5 **创建数组** JS6 **判断版本** JS ...
Vue2实现仿小米商城练手项目前端篇(2-首页实现)
缘由去年寒假里学习了Vue.js,开学后想做一个完整的练手项目实战一下,最后决定模仿小米手机官网做一个网站项目,具体参考了Github上一位作者的项目. 现在已经基本完成了,分享在CSDN作为学习记 ...
PEInfo编程思路讲解01 - 工具篇01|解密系列
PEInfo编程思路讲解01 - 工具篇01 让编程改变世界 Change the world by program 软件安全是信息安全领域的重要内容,本系列视频教程将涉及到软件相关的加密.解密. ...
cmdb python 采集虚拟机_Python编程(三十四)：CMDB后台管理、封装自定义JS组件、前端td标签定制显示内容及属性...
一. CMDB后台管理 CMDB管理主要分为采集资产.API接口.后台管理.这里主要介绍CMDB后台管理. - 采集资产 - API - 后台管理- 资产列表- 业务线列表- 用户列表- 组列表... ...
[转]解读2014之前端篇：任性的颠覆式改变
http://www.infoq.com/cn/articles/2014-review-front-end-part 2014年,整个IT领域发生了许多深刻而又复杂的变化,InfoQ策划了" ...
dreamweaver 正则表达式为属性值加上双引号_「前端篇」不再为正则烦恼
作者:李一二转发链接:https://mp.weixin.qq.com/s/PmzEbyFQ8FynIlXuUL0H-g 前言有不少朋友都为写正则而头疼,不过笔者早已不为正则而烦恼了.本文分享一些 ...
Jmeter 入门从0-1 基础篇-实操
Jmeter 入门从0-1 基础篇笔记有的图片链接可能失效了,等我修改好了在来编辑哈文章目录 1 JMeter 1.1 JMeter环境搭建和基本使用 1.1.1 JMeter环境搭建 1.1. ...

01 前端篇（标签）

01 前端篇（标签）相关推荐

最新文章

热门文章