00.HTML回顾

2018-01-23 本文已影响0人 Ching_Lee

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>