1.页面设置标签
- meta标签
//meta设置网页的编码字符集
<meta charset="utf-8"/>
//设置网页关键字
<meta name="keywords" content="HTML5"/>
//指定网页的描述
<meta name="description" content="发布h5相关信息"/>
//做请求的重定向,5秒后跳转到百度
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
-
在html中特殊的字符
- 自结束标签
<hr/>：生成分割线
<br/>：换行
2.块级元素
- 占领页面的一行
- 多个block元素自动换行
- 可以设置width，height，但是即使设置了width，依然会占一行。
- 块级元素可以设置margin 和 padding.
1） h1-h6标题
//h1最大h6最小，搜索引擎查询完title后，会立即查看h1标签，h1会影响排名。
<h1>html学习</>
2） p段落
p标签中的文字默认会独占一行，并且段和段之间会有间距。
<p>这是一段话</>
3） div
用来布局，表示页面的一个区域块。
4）blockquote长引用
子曰：<blockquote>有朋自远方来，乐呵乐呵</blockquote>
5）列表
- 无序列表ul,li列表项
type:disc,默认值，实心的圆点；square,实心的方块；circle，空心的圆。
<ul type="disc">
<li>西门大官人</li>
<li>柴大官人</li>
</ul>
- 有序列表ol
type:1,默认值，阿拉伯数字；a/A采用小写或大写字母
；i/I采用小写或大写的罗马数字。
<ol >
<li>西门大官人</li>
<li>柴大官人</li>
</ol>
- 定义列表dl
<dl>
<dt>武松</dt>
<dd>景阳冈打虎</dd>
<dt>武大郎</dt>
<dd>卖烧饼</dd>
</dl>
3.内联元素（行内元素）
3.1内联非置换元素：
- 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行。
- 行内元素设置width, height无效
- 宽度和高度由内容撑开
- 行内元素的margin 和 padding竖直方向无效水平方向有效
1）a超链接
//href可以写相对路径，也可以写完整的地址
<a href="http://www.baidu.com">百度一下</a>
//a标签中的target属性可以指定打开页面的位置
可选值：_self:当前页面(默认值)
_blank：新的窗口打开页面
也可以设定为内联框架的name
<a href="http://www.baidu.com" target=“myframe”>百度一下</a>
<iframe src=“demo.html” name=“myframe”></>
2)span元素
用来选中文字并为其设置样式。
<span>我是一个span</span>
3）文本标签
small：表示细则。合同中的小字或版权声明。字体会小一点
cite:表示书名、电影名、歌名等等的引用
em：表示一段内容中的着重点。斜体
strong：表示一个内容的重要性。粗体
i:单纯的斜体
b:单纯的加粗
合同<small>双方协议</small>中已经表明。
<cite>《论语》</cite>是我最喜欢的一本书。
我只是<em>看起来</em>很吓人
<strong>注意：一大波僵尸来袭</strong>
<i>我想斜</i>
<b>我要加粗</b>
q：表示引用“”
子曰：<q>学而时习之，不亦说乎</q>
sub:表示下标
sup:表示上标
del:表示删除，在原有文字上划线
ins:表示下划线，填空的内容
code:表示代码段
4）textarea文本域
<textarea name="info" rows="3" cols="20"><textarea>
3.2 内联置换元素
置换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。
HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。
- 与内联非置换元素的不同点在于：能够设置宽高，padding magin均可用
1)img图像
<img src="2.gif" alt="这是一个大松树" width=“50px” height=“100px” />
图片的格式
2）input
<input type="text" name="username" value=""/>
<input type="password" name="password" />
<input type="submit" value="注册">
单选按钮
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female " checked/>女
多选框
<input type="checkbox" name="hobby" value="zq"/>足球
<input type="checkbox" name="hobby" value="lq"/>篮球
<input type="checkbox" name="hobby" value="bpq"/>乒乓球
<input type="checkbox" name="hobby" value="ymq"/>羽毛球
重置,点击重置后表单所有内容清空
<input type="reset"/>
3）select下拉列表
multiple属性表示可多选
optgroup可以用来对选项分组
<select name=“star” multiple>
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>
</optgroup>
<optgroup label="男明星">
<option value="lyf">李易峰</option>
<option value="yy">杨洋</option>
</optgroup>
</select>
网友评论