00.HTML回顾

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>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,723评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,003评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,512评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,825评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,874评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,841评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,812评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,582评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,033评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,158评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,789评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2 352

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,637评论 0 30
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,540评论 32 459
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,219评论 0 5
  • 春和景明,惠风和畅,“中国最美的地方”洛阳白云山景区定于2016年4月1日结束冬季封山保育工作,以崭新的姿态...
    遇见旅行阅读 591评论 0 1