Web前端之HTML
1. HTML全称
Hyper Text Markup Language超文本标记语言
不是编程语言
HTML使用标记标签来描述网页
2. HTML页面例子
<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8’>
<title>aaaa<title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
例子解释
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
自闭合标签和闭合标签 meta就是自闭合标签 大多数都是闭合标签
常用标签
3. HTML常用标签
1. head标签
里面重要的标签meta和title
1. meta标签：
<meta charset="UTF-8"> 标识字符集 <meta name="Keywords" content="汽车之家"> 网站的关键字 <meta name="descrtion" content="哈哈好"> 网站的描述信息 <meta http-equiv="Refresh" content="10,http://www.baidu.com"> 10秒后跳转到百度,如果不加跳转地址，只是刷新本页面。 <link rel="icon" href="//www.jd.com/favicon.ico"> 获得京东的小图标
2. title标签
<title>JD</title>
2. body标签
1. 标签分类： 块级标签和内联标签
区别：块级标签可以独占一行，可以设置长宽高。
内联标签不能独占一行，不可以设置长宽高。
注意： 块级标签只能嵌套块级标签和内联标签 p标签只能嵌套内联标签(特殊)
内联标签只能嵌套内联标签
块级标签 h1 h2 h3 h4 h5 h6 p div
内联标签 b span a img
2. 具体标签
标题 总共就6个 <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> 段落 <p> </p> <p>This is a paragraph.</p> <p>This is another paragraph.</p> 超链接 所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序 <a href="http://www.w3school.com.cn">This is a link</a> <a href="http://www.sohu.com" target="_blank">点击</a> 打开一个新的窗口，默认不指定target使用原有的窗口 图像 <img src="w3school.jpg" width="104" height="142" /> src:要显示图片的路径 alt:图片没有加载成功时的提示 title:鼠标悬浮时的提示信息 width:图片的宽 height:图片的高（宽高两个属性只用一个会自动等比缩放） 空元素(换行) <br> 旧版本使用这个。 <br /> 以后都是使用这个。 水平线 <hr />在HTML页面中创建水平线。 b标签 加粗 <!-- 与 --> 注释 div标签 常用的标签，独占一行 span标签 不能独占一行
3. 列表标签
1. 无序列表
<ul> <li type=circle>Coffee</li> <li type=circle>Milk</li> </ul>
2. 有序列表
<ol> <li>Coffee</li> <li>Milk</li> </ol>
3. 定义列表
<dl> <dt>Coffee</dt> 列表标题 <dd>houziniubi</dd> 列表选项 <dd>h2222i</dd> <dt>Milk</dt> </dl>
4. 表格标签
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>杨建波</td>
<td>39</td>
</tr>
</table>
<tr>: table row
<th>: table head cell
<td>: table data cell
属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
5. 表单标签
1. 功能
表单用于向服务器传输数据，从而实现用户与web服务器的交互
2. 表单属性
action: 表单提交到哪儿,一般指向服务器端一个程序，程序接收到表单提交过来的数据作相应处理
method: 表单的提交方式post/get，默认值就是get
3. 表单工作原理
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息
4. input标签
<1> 表单类型
type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别？
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
上传文件注意两点：
1 请求方式必须是post
2 enctype="multipart/form-data"
<2> 表单属性
name: 表单提交项的键.
注意和id属性的区别：name属性是和服务器通信时使用的名称；
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
checked: radio 和 checkbox 默认被选中
readonly: 只读. text 和 password
disabled: 对所用input都好使.
例子：
<form action="" method="post">
<p>
<label for="user">姓名：</label>
<input type="text" name="user" value="yuan" id="user">
</p>
<p>密码：<input type="password" name="pwd" value="123"></p>
<p>爱好：<input type="checkbox" name="hobby" value="lanqiu" checked>篮球
<input type="checkbox" name="hobby" value="zuqiu">足球
<input type="checkbox" name="hobby" value="shuangsqiu">双色球
</p>
<p>
性别：<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="egon">其他
</p>
<p>
<input type="button" value="按钮" onclick="alert(123)">
</p>
<p>
<input type="reset">
</p>
<p>
头像：<input type="file" name="avatar">
</p>
<p>
<input type="hidden" name="egon" value="is_dog">
</p>
</form>
5. select标签
<select> 下拉选标签属性
name:表单提交项的键.
size：选项个数
multiple：multiple
<optgroup>为每一项加上分组
<option> 下拉选中的每一项 属性：
value:表单提交项的值.
selected: selected下拉选默认被选中
例子：
<select name="pro" size="3" multiple>
<option value="1">河北省</option>
<option value="2">河南省</option>
<option value="3" selected="selected">山东省</option>
</select>
6. textarea多行文本框
<form id="form1" name="form1" method="post" action="">
<textarea cols=“宽度” rows=“高度” name=“名称”>
默认内容
</textarea>
</form>
例子：
<p>个人简介：
<textarea name="person" id="" cols="80" rows="10"></textarea>
</p>
7. label标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form method="post" action="">
<label for=“username”>用户名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>
例子：
<p>
<label for="user">姓名：</label>
<input type="text" name="user" value="yuan" id="user">
</p>
4. HTML属性
属性总是出现在HTML元素的开始标签中。
<a href="http://www.w3school.com.cn">This is a link</a>
链接的地址在href属性中指定。
标题的属性。
<h1 align="center"> 拥有关于对齐方式的附加信息。
主体的属性
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
注：属性值永远都在引号内。双引号是最常用的。有时候也用单引号。name='Bill "HelloWorld" Gates'
5. HTML的style属性
1. 应该避免使用下面这些标签和属性
|
标签 |
描述 |
|
<center> |
定义居中的内容。 |
|
<font> 和 <basefont> |
定义 HTML 字体。 |
|
<s> 和 <strike> |
定义删除线文本 |
|
<u> |
定义下划线文本 |
|
属性 |
描述 |
|
align |
定义文本的对齐方式 |
|
bgcolor |
定义背景颜色 |
|
color |
定义文本颜色 |
以上标签和属性都不会再使用。现在都使用style属性了。
2. 例子一，如下：
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
定义主体的背景色为黄色
定义标题2的背景为红色
定义段落的背景为绿色
这个替换bgcolor属性。
3. 例子二，如下：
<html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
3. 例子三，如下：
<html> <body> <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
6. HTML文本格式化
1. 文本格式化标签
|
标签 |
描述 |
|
定义粗体文本。 |
|
|
定义大号字。 |
|
|
定义着重文字。 |
|
|
定义斜体字。 |
|
|
定义小号字。 |
|
|
定义加重语气。 |
|
|
定义下标字。 |
|
|
定义上标字。 |
|
|
定义插入字。 |
|
|
定义删除字。 |
|
|
不赞成使用。使用 <del> 代替。 |
|
|
不赞成使用。使用 <del> 代替。 |
|
|
不赞成使用。使用样式（style）代替。 |
2. “计算机输出”标签
|
标签 |
描述 |
|
定义计算机代码。 |
|
|
定义键盘码。 |
|
|
定义计算机代码样本。 |
|
|
定义打字机代码。 |
|
|
定义变量。 |
|
|
定义预格式文本。 |
|
|
<listing> |
不赞成使用。使用 <pre> 代替。 |
|
<plaintext> |
不赞成使用。使用 <pre> 代替。 |
|
<xmp> |
不赞成使用。使用 <pre> 代替。 |
3. 引用、引用和术语定义
|
标签 |
描述 |
|
定义缩写。 |
|
|
定义首字母缩写。 |
|
|
定义地址。 |
|
|
定义文字方向。 |
|
|
定义长的引用。 |
|
|
定义短的引用语。 |
|
|
定义引用、引证。 |
|
|
定义一个定义项目。 |
浙公网安备 33010602011771号