一、默认创建的HTML5文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
标签:一对尖括号包含的东西叫标签,例如<html></html>。
标签属性:标签内部写的东西,例如<html lang="en">中的lang="en"。
注释:使用<!-- XXX -->进行注释
注释快捷键:
pycharm中使用ctrl+/快捷键注释。
<!DOCTYPE html>:表示一个厂商的html规范。
html标签只能有一个,其中默认包含<head></head>和<body></body>。
标签分类:
1.自闭合标签:例如<meta charset="UTF-8">,这种标签比较少,例如<link>等。
2.主动闭合标签:例如<body></body>等。
二、<head>里面的标签:
<meta charset="UTF-8">:指定编码。避免乱码
<title>test</title>: 除了该标签,head标签中的所有内容在浏览器中都是不可见的。该标签的内容显示在网页的页签上。
循环刷新(不常用):
每三秒刷新一次:<meta http-equiv="Refresh" Content="3">
五秒后跳转到URL:<meta http-equiv="Refresh" Content="5" Url="http://www.baidu.com">
注:不常用,数秒跳转一般用JS实现。
关键词:
<meta name="keywords" content="星际2,专访,911">:给搜索引擎(百度等)用的,不过现在都要收钱,所以没太大意义。
描述:
<meta name="description" content="汽车之家,一个为您提供最新汽车资讯的网站">:用于介绍网页信息。
兼容性:
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8">:优先IE9,然后IE8。目前百度首页是:content="IE=Edge"。
<link> <style> <script>三个标签在后面详解。
<link rel="shortcut icon" href="image/favicon.ico">:指定页面图标。
<link rel="stylesheet" type="text/css" href="css/common.css">:指定CSS样式。
二、<body>中的标签
空格: 在html中空格使用 来表示,例如:
<a href="www.baidu.com">Hello World</a> 表示hello world,中间4个空格。
"<"和">":使用<和>分别表示"<"和">"。例如:
<a href="www.baidu.com"><Hello World></a> 表示<hello world>,中间4个空格,两边用尖括号括起来。
还有很多代码用来表示字符,如下图(更多查文档):
<p>标签:
特点:段落与段落之间有间距。
<br>标签:
用于换行,如果在<p>标签中换行,则无间隔。
<h>标签:
用于标题,加大加粗,包含h1-h6,一次从大到小,每个h标签,独占一行。
<span>标签:
一个白板,什么特性都不带,可以使用CSS为其加上特性。
<span>hello</span> <span>hello</span> <span>hello</span> <span>hello</span> <span>hello</span>
效果如下:
每一个span占用固定的大小,并且处于一行中。
<div>标签:
使用率最高的标签,也是一块白板,但是占一行。
标签总结:
从<h>和<span>的效果可以总结,标签分为两类:
1.块级标签:一个标签始终占一行,例如h标签和p标签以及div标签等。
2.内联标签或行内标签:每个标签在一行中占自己该有的部分,例如span标签。
标签之间可以互相嵌套。
chrome浏览器审查元素:
右键点击“审查”或“检查”,或者按F12,然后选择Elements:
<input>标签:
<input type="text"/> <!--代表普通文本框--> <input type="password"/> <!--代表密码框--> <input type="button" value="确定"/> <!--代表普通按钮--> <input type="submit" value="登录"/> <!--代表提交按钮-->
效果如下:
(真正要提交数据还需要form标签)
<form>表单:
<form action="提交的位置" method="post"> <input type="text" name="user"/> <!--代表普通文本框--> <input type="password" name="pwd"/> <!--代表密码框--> <input type="submit" value="登录"/> <!--代表提交按钮--> </form>
action表示提交到哪里。
method表示提交的方式,若不制定POST的话默认为GET。GET和POST仅仅是数据放置的位置不同,和安全没有特定关系,传输密码都需要加密。
name属性是必须的,name代表着控件本身,相当于key,与内容组成key-value,才能提交到后台,后台才能获取数据。
value属性,可以设置控件显示的名称(例如按钮),也可以设置默认值(例如文本框)。
<input type="text" value="Hello" name="user"/>
<input>标签中的radio:
单选框:
<div> "男":<input type="radio" name="gender" value="1"/> "女":<input type="radio" name="gender" value="2"/> "妖":<input type="radio" name="gender" value="3"/> </div>
要实现单选互斥,name必须一致,后台根据gender来取值,1表示男性,2表示女性,3表示人妖。
<input>标签中的checkbox:
复选框:
<div> 请选择爱好:<br> "足球":<input type="checkbox" name="favor" value="1"/> "篮球":<input type="checkbox" name="favor" value="2"/> "跑步":<input type="checkbox" name="favor" value="3"/> "音乐":<input type="checkbox" name="favor" value="4"/> "舞蹈":<input type="checkbox" name="favor" value="5"/> </div>
后台通过获取一个列表get_arguments('favor')来取得相应的值。
单选框radio和多选框checkbox,默认选择:
<div> "男":<input type="radio" name="gender" value="1" checked="checked"/> "女":<input type="radio" name="gender" value="2"/> "妖":<input type="radio" name="gender" value="3"/> </div> <div> 请选择爱好:<br> "足球":<input type="checkbox" name="favor" value="1" checked="checked"/> "篮球":<input type="checkbox" name="favor" value="2" checked="checked"/> "跑步":<input type="checkbox" name="favor" value="3"/> "音乐":<input type="checkbox" name="favor" value="4"/> "舞蹈":<input type="checkbox" name="favor" value="5"/>