前端-html-长期维护
前端学什么?
# 前端三大部分
# HTML,页面内容,学习标签
# CSS,页面样式,学习选择器和属性
# JS,页面动作,学习基础语法和BOM&DOM
#################
# jQuery和bootstrap
HTML的学习内容
HTML的学习内容
1,文档结构,注释,标签格式,
2,head里面的常见标签,meta,title,style,link,script,
3,body里面的常见标签,
常用标签,div,span,p,img,u,i,s,b,a,
列表,ul,li,ol,dl,dt,dd,
表格,table,thead,tr,th,tbody,tr,td,
表单,input,select,textare,
基本就是这几部分,
html第一部分:文档结构,注释,标签格式,
html文件的结构
# html文件的结构
# <!DOCTYPE html> # 这是标记这是一个html文件
# <html>
# <head></head>
# <body></body>
# </html>
html注释
<!--注释内容-->
<!--商品列表 开始-->
商品列表相关的html代码
<!--商品列表 结束-->
# 注释是非常重要的一个代码习惯!!
html第二部分:html常用的标签
标签全局属性
全局属性是指在任何元素中都可以使用的属性
HTML全局属性(global attribute)有哪些?
我这里列举一些常用的
标签 | 备注 | |
---|---|---|
id | 定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。 | |
class | 一个以空格分隔的元素的类名,可以通过css类选择器访问 | |
hidden | 布尔属性,为true浏览器不会呈现此类元素 | |
style | 含要应用于元素的CSS样式声明。 请注意,建议在单独的文件中定义样式。 | |
title | 规定有关元素的额外信息。 | |
draggable | 规定元素是否可以拖动 |
标签列表
分类 | 标签 | 标签属性 |
---|---|---|
html | html | |
head | head | |
title | ||
style | ||
script | ||
link | ||
meta | ||
body | body | |
h1 标题 | ||
img 图片 | ||
a 超链接 | href | |
p 文本 | ||
span | ||
div | ||
b加粗,i倾斜,u下滑线,s删除 | ||
br/换行,hr水平线 |
<!DOCTYPE html>
<html lang="en">
<!--head 内常用标签
######################################################
<title></title> # 定义网页标题
<style></style> # 定义内部样式
<script></script> # 定义js代码或者引入外部js文件
<link rel="stylesheet" href="test.css"> # 引入外部样式文件
<meta> # 定义网页原信息,原信息是给浏览器看的,不是给客户看的,
<meta charset="UTF-8"> # 中文显示
-->
<head>
<meta charset="UTF-8">
<title>这是第一个html页面</title>
<!--<style>-->
<!--a{-->
<!--color: red;-->
<!--}-->
<!--</style>-->
<script>
// alert("hello")
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<!--
body 内部常用的标签
#########################################
<h1></h1>标签
<img src="" alt="">标签
<a href=""></a> 标签
标签里面可以添加属性,
-->
<a href=""></a>
<!--h标签,h1最大,使用的场景就是标题,比如新闻的一级二级三级标题-->
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
hello
<!--src是图片地址,alt是图片加载失败的时候给用户一个提示,title是鼠标放上去会显示这个图片title-->
<!--id,同一个页面是唯一的,可以没有这个属性,-->
<img id="i1" src="http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg" alt="图片加载失败" title="鼠标放上去会显示这个图片title">
<!--href是超链接的地址,target="_blank",这是在新的浏览器页面打开,不加这个就在本页面打开,不只是可以跳转连接,还可以跳转到另一个a标签-->
<a href="http://www.baidu.com" target="_blank">baidu</a>
<a href="#a1">跳转到a1</a>
<a href="" id="a1">a1标签</a>
<!--
b加粗
i倾斜
u下滑线
s删除
p段落
br/换行
hr水平线
-->
<b>python</b>
<i>python</i>
<u>python</u>
<s>python</s>
<h1>海燕</h1>
<p>这是一个段落</p>
<br/>
<hr>
<p>这是一个段落</p>
<!--
特殊字符
1< 小于号
> 大于
© 版权
空格
& &
¥ ¥
® 注册
这是常用的,还有很多,用到的时候网上查
-->
1<
2>
©
&
¥
®
<h1> 海 燕</h1>
<!--
div标签和span标签
###############################################
div标签会换行,
span标签不会换行,
这两个标签没有明显的特点,这两个就像是白纸,是我们在html里面用的最多的,改变样式是使用css,
快速复制本行到下一行:ctrl+D
##########################
这两个什么时候使用?
标签分类:
块级标签,默认占浏览器长度,能设置长和宽,h标签,div标签,p标签,hr标签,
内联标签,根据内容决定长度,不能设置长和宽,比如a标签,u,b,s,i,span,img标签,
-->
<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>
</body>
</html>
html常用标签:列表,ul,li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--列表-->
<!--无序标签 unordered list -->
<!--
前面是黑色的圆圈,可以改变这个样式,
type:
square:实心方块
circle:空心圆圈
-->
<ul type="square">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!--有序标签 ordered list-->
<!--
前面默认是数字1,可以改变这个,
type:
I :罗马数字
A:字母,
...
start :3
这是可以指定从第几开始,
-->
<ol type="I" start="3">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<!--标题列表 definition lists-->
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
</body>
</html>
html常用标签:表格 table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表格-->
<!--
表格:table
属性,border,设置边框,默认是没有边框的,一般不用这个,都是用css来设置,
表头:thead
行:tr,table row
列:th,table header cell
表内容,tbody
行:tr table row
列:td table data cell
-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>爱好</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>andy</td>
<td>11</td>
<td>man</td>
</tr>
<tr>
<td>liqian</td>
<td>11</td>
<td>man</td>
</tr>
</tbody>
</table>
</body>
</html>
标签的嵌套规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
标签的嵌套规则
1,行内标签不能嵌套块级标签,
2,p标签不能嵌套块级标签
-->
<!--块级标签div嵌套div,这种是用的最多的,-->
<div>
<div>嵌套</div>
</div>
<!--p标签也是块级标签但是不能嵌套块级标签-->
<p>
<div> 这种嵌套是不行的</div>
</p>
<!--块级标签可以嵌套行内标签-->
<h1><a href=""><i>这种嵌套都是可以的</i></a></h1>
</body>
</html>
html常用标签:表单form,表单是一个重要内容
form表单
前后端有交互使用form表单,
form表单是用来提交数据的,
form表单就像是一个容器,本身是不展示什么内容的,
input框必须要有name,构成一个键值对,传到后端,后端就可以识别这个键值对,
form表单相关标签列表,以及标签属性
标签 | 描述 | 属性 |
---|---|---|
input标签 | type是text 文本输入框 | type 这个输入框的类型 |
name,输入框的名字 | ||
value,是给这个input框增加默认值, | ||
readonly,这是只读 | ||
disable,不可用 | ||
placeholder, 这个会默认展示,但是不影响输入 | ||
type是submit 提交按钮 | ||
type是email 邮件输入 | ||
type是file 文件上传 | ||
type是date 日期选择 | ||
type是radio 单选框 | ||
type是checkbox 多选框 | 设置就是checked,默认是选中的状态, | |
type是reset 重置按钮 | ||
type是button 按钮 | ||
type是hidden 隐藏 | ||
select标签和option标签 | 这是一对 | name在select里面 |
value在option里面 | ||
select里面可以设置multiple,就是多选的下拉框了 | ||
textarea标签 | 用来输入大段的文本 | 可以设置cols和rows的数量, |
注意:
-
input标签的,10种,type:text,submit,email,file,date,radio,checkbox,reset,button,hidden,
name,type和value都在input里面, -
input-hidden,这种在修改的时候需要传递后端id,但是我们不想要客户修改,就可以隐藏起来,这种要有name和value的,
-
需要输入的内容可以不设置value,只设置name就可以,比如text,email,date,file,testarea,
-
但是那些需要选中的内容,一定要设置name,也一定要设置value,后端要获取的,比如radio,CheckBox,select,hidden,
-
还有一些可以不设置name,但是要有value,比如submit,reset,button,这个value就是按钮的名字,
所有的这些标签都是行内标签,所以需要用p标签来包裹,独占一行,
最外成就是一个form表单,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--写一个注册页面-->
<!--action 控制往哪里提交,-->
<!--method这个是提交方式,不写默认是get,-->
<!--enctype="multipart/form-data",这个是数据提交的时候格式,有文件的时候,一定是要multipart/form-data,
默认是:application/x-www-form-urlencoded-->
<!--autocomplete="off",H5有自动补全的功能,就是输入内容会有提示,你可以关闭,-->
<!--novalidate,加上这个就不做校验了,-->
<form action="" method="post" enctype="multipart/form-data" autocomplete="off" novalidate>
<p>用户名:
<input name="user" type="text" readonly value="小美">
<input name="user" type="text" placeholder="小美" disabled>
</p>
<p>
<label for="a1">用户名:</label>
<input id="a1" name="user" type="text" readonly value="小美">
<input name="user" type="text" placeholder="小美" disabled>
</p>
<p>密码:
<input name="pwd" type="text">
</p>
<!--这个email类型模式是会自动校验格式的,如果不做校验,可以增加一个form表单的属性,novalidate-->
<p>邮箱:
<input name="email" type="email">
</p>
<!--比如用户修改一条信息,提交的时候需要有id,但是我又不想用户改id,那就需要把id隐藏-->
<p>
<input type="hidden" value="hidden">
</p>
<!--这种单选框,必须要有name和value,这样构成键值对,才可以-->
<!--checked,这是默认选中-->
<p>性别:
<input name="gender" type="radio" value="1"> 男
<input name="gender" type="radio" value="0"> 女
<input checked name="gender" type="radio" value="0"> 保密
</p>
<!--label标签可以不使用,但是标准的写法是使用label标签的,
使用了label标签,点击文字也能选中这个单选按钮,否则必须是点击这个按钮才可以选中
-->
<p>性别2:
<!--第一种label标签的写法-->
<label for="r1"> 男</label>
<input id="r1" name="gender" type="radio" value="1">
<!--第二种label标签的写法-->
<label> 男
<input name="gender" type="radio" value="1">
</label>
<label for="r2">女</label>
<input id="r2" name="gender" type="radio" value="0">
<label for="r3">保密</label>
<input id="r3" checked name="gender" type="radio" value="0">
</p>
<p>爱好:
<input name="hobby" type="checkbox" value="lanqiu"> 篮球
<input name="hobby" type="checkbox" value="zuqiu"> 足球
<input name="hobby" type="checkbox" value="shuangseqiu"> 双色球
</p>
<p>地址:
<!--selected默认选中一个下拉选项-->
<select name="address1" id="1">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
<!--multiple,这是设置一个下拉框支持多选-->
<select name="address1" id="11" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>
<select name="address2" id="2">
<optgroup label="北京">
<option value="cy">朝阳</option>
<option value="hd">海淀</option>
<option value="cp">昌平</option>
</optgroup>
<optgroup label="上海">
<option value="pd">浦东</option>
<option value="hp">黄埔</option>
<option value="bs">宝山</option>
</optgroup>
</select>
</p>
<p>备注:
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<!--这种文件,后端需要接收,然后使用with open进行存储-->
<p>头像:
<input name="test" type="file">
</p>
<p>生日:
<input name="birthday" type="date">
</p>
<!--一定要有提交按钮,而且type一定要是submit,否则点击提交是无效的,-->
<p>
<input type="submit" value="提交">
</p>
<!--这个button,可以使用js给他绑定事件-->
<p>
<input type="button" value="button">
</p>
<p>
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
技术改变命运