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. 引用、引用和术语定义
标签 |
描述 |
定义缩写。 |
|
定义首字母缩写。 |
|
定义地址。 |
|
定义文字方向。 |
|
定义长的引用。 |
|
定义短的引用语。 |
|
定义引用、引证。 |
|
定义一个定义项目。 |