前端基础01 HTML

阅读量：6417 次

发布时间：2019-06-23

本文共 2996 字，大约阅读时间需要 9 分钟。

HTML标签格式

几个重要的标签属性

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

HTML注释

PyCharm中设置注释符：
Settings-Languages & Frameworks-Python Template Languages
选择None注释符为，选择Django注释符为{##}

head内常用标签

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息

Meta标签

<meta http-equiv="refresh" content="2;URL=;

body内常用标签

a标签

超链接标签

点我

href属性指定目标网页地址。该地址可以有几种类型：

绝对URL - 指向另一个站点（比如 href="）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）

target：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

标签分类:    块儿级标签            h1~h6 div p hr         默认占浏览器宽度        能设置长和宽    内联标签(行内标签)   a img u s i b span        根据内容决定长度        不能设置长和宽

列表

无序列表


      
     第一项
  
     第二项

type属性：none（无样式）

有序列表


      
     第一项
  
     第二项

标题列表

表格


    
                                  #                姓名                年龄           
         
                                                                                 夏小沫                18           
                                                                        小小瓜                3

#	姓名	年龄
	夏小沫	18
	小小瓜	3

属性:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

快捷方式

1.生成四个h1标签，每个h1标签里包含一个a标签，每个a标签里包含class属性，四个标签的内容按顺序生成

$代表序号

{}表示标签里面的内容

h1*4>a.cl{a标签$}

按tab后生成

a标签1
a标签2
a标签3
a标签4

2.在上面的基础上加上id

h1*4>a.cl[id=a$]{a标签$}

按tab后生成

a标签1
a标签2
a标签3
a标签4

标签的嵌套规则

行内标签不能嵌套块级标签
p标签不能嵌套块级标签

form表单

表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。

表单属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定向何处提交表单的地址（URL）（提交页面）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单时所用的 HTTP 方法（默认：GET）
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）

input

<input> 元素会根据不同的type属性，变化为多种形态

type属性值	表现形式	对应代码
text	单行输入文本	<input type="text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮，多用js绑定事件	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />