41 前端
- 老师博客 : https://www.cnblogs.com/liwenzhou/p/7988087.html
1 . <!DOCTYPE>标签
<!DOCTYPE>声明必须是html文档中的第一行, 位于html标签之前.
<!DOCTYPE>声明不是html标签;它是由web浏览器关于页面使用哪个html版本进行编写的指令.
2 . head内常用标签:
<title>定义网页标题<title>
<style>定义内部样式表<style>
<script/>定义js代码或者引入外部js文件<script>
<link/>引入外部样式表文件
<meta/>定义网页原信息
meta标签的介绍:
1) : <meta>元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
2) : <meta>标签位于文档的头部，不包含任何内容。
3) : <meta>提供的信息是用户不可见的。
meta标签的组成:有两个属性:http-equiv属性和name 属性
http-equiv属性: 相当于http的文件头作用,它可以像浏览器传回一些有用设为信息,以帮助正确的显示网页内容,与之对应的属性值为content, content的中的内容其实就是各个参数的变量的值
name属性: 主要用于描述网页, 与之对应的属性值为content, content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.
3 . body内常用标签:
行级标签: 在一行内显示
a : 超链接标签
1) :所谓的超链接标签就是指从一个网页指向一个目标的连接关系,这个目标可以使另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮箱地址,一个文件,甚至一个应用程序.
2) <a href= '' target=''>点我</a>
href属性指定目标网页地址
target的两个参数: _blank表示在新标签中打开目标网页
_self默认为这个,表示在当前网页打开这个目标网页.
i/b/u/s: 斜体 加粗 下划线 删除
img : 图片
1) : <img src='图片的路径',alt='图片未加载成功的提示' title='鼠标悬浮时的提示信息' width='宽' height='高'>
span : 用于定义内联元素,并无实际的意义.主要通过css样式为其赋予不同的样式
块级标签 : 独占一行的
h : 标题
p : 段落标签
div : 用来定义一个块级标签,并没有实际意义, 主要是通过css样式赋予不同的表现
4 . 特殊字符
<br> 换行 &<nbsp>; 空格 <hr> 水平线
© 版权 ® 注册 < 小于号 > 大于号
5 标签的嵌套
通常块级标签可以包含内联元素或某些块级元素, 但内联元素不可以包含块级元素.它只能包含其他内联元素.
p标签不能嵌套p标签
p标签不能嵌套div标签
6 . 列表
1) 无序列表ul type属性
disc (实心远点,默认值) circle(空心圆圈) square(实心方块) none(无样式)
<ul type="none">
<li>第一项</li>
<li>第二项</li>
</ul>
2) 有序列表ol type属性
1 数字列表 默认值 A大写字母 a 小写字母 I/i: 大小写罗马
<ol type="a" start="3">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
3) 标题列表dl
<dl>
<dt>标题一</dt>
<dd>内容一</dd>
<dt>标题二</dt>
<dd>内容一</dd>
<dd>内容二</dd>
</dl>
7 . 表格
属性 : border: 表格边框. cellpadding: 内边距 cellspacing: 外边距.
<!--表格-->
<table border="1" cellpadding="10" cellspacing="20">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>sylar</th>
<th>male</th>
</tr>
<tr>
<th>2</th>
<th>taibai</th>
<th>male</th>
</tr>
<tr>
<th>3</th>
<th>景女神</th>
<th>female</th>
</tr>
</tbody>
</table>
8 . 获取用户输入的标签
form标签 (action属性, method属性 enctype属性)
一个容器, 包住所有获取用户输入的标签
input 标签
type :
文本框类:
text:password email date
<label for="i1">用户名</label> #提示语
<input type="text" id="i1" placeholder="请输入用户名" value="lily"/>
复选框,单选框类:
checkbox
radio
<p><input type="checkbox">足球</p>
<p><input type="checkbox" checked="checked">篮球</p>
<!--单选框-->
<input type="radio"/>男
<input type="radio" name="gender"/>女
按钮类:
button 普通按钮 , 通常用js给她绑定事件
submit 提交按钮, 默认将form表单的数据提交.
reset 重置按钮 将当前form中的输入框都清空.
<input type="button" value="我是一个按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
select标签:
<select name="city" id="city">
<option value="1" selected="selected">北京市</option>
<option value="2">上海市</option>
<option value="3">深圳市</option>
</select>
<select name="city" multiple>
<option value="1">北京市</option>
<option value="2">上海市</option>
<option value="3">深圳市</option>
</select>
textarea标签:
<textarea name="info" id="1" cols="30" rows="10"></textarea>
form表单提交数据的注意事项:
{'k1':'v1'}
1 . form 标签必须把获取用户输入的标签包起来
2 . form中的获取用户输入的标签必须有name属性
9. 注册:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<form action="">
<div>
<label>用户名
<input type="text" name="username">
</label>
</div>
<div>
<label>手机号
<input type="text" name="phone">
</label>
</div>
<div>
<label>密码
<input type="password" name="password">
</label>
</div>
<div>
<label>验证码
<input type="text" name="code">
</label>
</div>
<div>
<input type="checkbox" name="agree">
<input type="button" value="获取短信验证码">
<span>阅读并接受《<a href="">百度用户协议</a>》及《<a href="">百度隐私保护声明</a>》</span>
</div>
<div>
<input type="submit" value="注册">
</div>
</form>
</body>
</html>
浙公网安备 33010602011771号