2020-03-24复习笔记

浏览器(内核)

  • Chrome(Blink)
  • Firefox (Gecko)
  • Safari (Webkit)
  • Opera (Presto)
  • IE (Trident)

meta标签:

指定编码字符集,告诉浏览器用哪种字符集解析文件。

utf-8字符集:

包含世界上所有的文字。(被称为万国码)
保存文件时报存格式要和mate标签指定的字符集格式保持一致,不然还是会乱码

标签分类

  • 单标签:不需要包裹内容的。
  • 双标签:需要包裹内容的。

标签的作用

  • 标签的作用不是给标签内的东西设置样式,设置样式其实是浏览器干的事,标签只负责让浏览器识别它是什么,浏览器会再根据它的类型设置对应的样式。

DTD文档声明

  • 样式为:<doctype html>,大小写没限制,都行。

  • 由于HTML先后有多个规范出台,不同规范可能存在语法差异,所以要搞用DTD文档告诉浏览器我这是用哪一种规范写的。

  • DTD文档声明必须写在文件的第一行!!!
<DOCTYPE HTML>      #文件第一行!!!
<html>
      <head>
              <meta charset="UTF-8">
              <title></title>
      </head>
       
      <body>
      </body>

</html>
  • 不写DTD文档声明文件也能正常运行,但这是规范要求,所以必须要写。

Web标准规范

  • Web标准有很多规范,而html5规范是向下兼容的,采用html5规范的文档可以适用于任意规范。

Webtorm操作技巧

  • 快速新建文件: Ctrl + Alt +Insert

  • 光标跳动到行末: End

  • 光标跳动到行首: Home

  • 光标多行闪烁:按住Alt,上下拖动鼠标

  • 快速复制光标所在行: Ctrl + D

  • 快速删除光标所在行: Ctrl + X

  • 快速给内容包裹标签:选中内容,按下 Ctrl + Alt + T,再按回车输入标签名就好了。

  • 设置文本超过屏幕自动换行:
    在Webpack里,进入File--Setting--Editor--General,在Soft Wraps里勾选Use soft wraps in editor,点击OK设置完成。

  • 快速上下移动选中内容:
    Ctrl +Shift + ↑(方向键上)
    Ctrl +Shift + ↓(方向键上)

  • 快速合并/展开标签:
    选中标签,按下
    Ctrl+ -
    Ctrl+ +

  • 快速新启一行: Shift + Enter

  • 生成标签结构

各标签作用

(这是不严谨的说法,因为标签其实只负责标记,这里应该理解成浏览器对各个标签的渲染效果)

  • p标签:让元素独占一行
  • hr标签:生成一条独占一行的分割线

注释

  • 语法:
<!-- 注释内容  -->
  • 注释快捷键:Ctrl + /

img标签

  • 作用:插入图片
属性
  • src(设置图片路径)
<img src="url地址">
  • width、height(指定宽高)
<img src="url地址"  width="100px"  height="100px">

不指定宽高时将是默认宽高,指定宽高中的一方,图片会等比例变化。

<img src="url地址"  width="100px">

<img src="url地址"   height="100px">
  • title(鼠标悬停时,弹出图片描述框,内容就是title的值)
<img src="url地址"  width="100px"  title="这是一张图片">

-alt(图片加载失败时显示的信息)

<img src="url地址"  width="100px"  alt="对不起,图片不见了~" >

img标签不会独占一行

a标签

  • 属性

href
<a href="url">链接</a>

taget
<a href="url" taget="-self"> 链接</a> 在当前页面打开链接(默认)
<a href="url" taget="-blank"> 链接</a> 在新的网页中打开链接

title
<a href="url" title="这是标题提示">链接</a>

列表

  • 无序列表
<ul>
    <li> </li>
    <li> </li>
    <li> </li> 
</ul>
  • 有序列表
<ol>
    <li> </li>
    <li> </li>
    <li> </li> 
</ol>

表格

表格结构:

<table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
        </tr>

        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
        </tr>

        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
         </tr>
</table>

效果是一个三行三列的表格,如下图

1.1 1.2 1.3
2.1 2.2 2.3
3.1 3.2 3.3

表格宽高默认由内容撑开,也可以通过width、height属性设置。
表格border默认是0

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

推荐阅读更多精彩内容