HTML入门

关于HTML在此就不进行过多的介绍了,暂时只介绍一些易混淆或概念不清楚的内容。

介绍几个网站:

  • 在dribbble.com 搜索cv或者resume
  • 五百丁直接花钱购买Word模板
  • 如果还找不到好看的,可以去在 Google 搜索「frontend resume template」或者「frontend cv template」碰碰运气,找找灵感。
1、空元素

官方定义:一个空元素(empty element)可能是 HTML,SVG,或者 MathML 里的一个不可能存在子节点(例如内嵌的元素或者元素内的文本)的element。
HTML,SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容(define very precisely what each element can contain)。许多组合是没有任何语义含义的,比如一个 <audio> 元素嵌套在一个 <hr> 元素里。
个人理解为,如p标签中是需要放入文本内容的,所以p不是空元素,但是link标签中是不能够放入内容的,就算加入内容也无效,link只能引入文件,所以link为空元素。
在HTML中有一下空元素:

<area>
<base>
<br>
<col>
<colgroup>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>
2、可放在head元素内的标签

有效的<head> 元素包括 meta, link, title, style, script, noscript, and base。使用方法如下:

<!--
  Set the character encoding for this document, so that
  all characters within the UTF-8 space (such as emoji)
  are rendered correctly.
-->
<meta charset="utf-8">

<!-- Set the document's title -->
<title>Page Title</title>

<!-- Set the base URL for all relative URLs within the document -->
<base href="http://example.com/page.html">

<!-- Link to an external CSS file -->
<link rel="stylesheet" href="styles.css">

<!-- Used for adding in-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript & No-JavaScript tags -->
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- No JS alternative  -->
  如果用户的浏览器不支持script,则会显示noscript中的内容
</noscript>
3、关于iframe
  • iframe 可以拥有一个 name,a 标签的 target 可以通过 name 指向这个 iframe
  • 现代前端开发中,iframe 很少用
  • iframe 用于在当前页面里嵌入一个页面
4、声明meta

声明meta有两种方式:

<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
5、可替换元素

CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有:

<img>
<object>
<video> 
<textarea>
<input>
//某些元素只在一些特殊情况下表现为可替换元素,例如 
<audio>
<canvas>

和 表单元素,如 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素(anonymous replaced elements)。

CSS在某些情况下会对可替换元素做特殊处理,比如计算外边距和一些auto值。
拿图片来举例,在页面加载到img标签的时候,并不知道img的宽高,此时会去请求img的src,请求回图片的宽高如位进行css样式定义,则默认为图片宽高

6、iframe页面与a标签

1)eg:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>iframe</title>
  <style>
    iframe{
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <iframe src="#" frameborder="0" name="test"></iframe>
  <a href="https://cn.vuejs.org/" target="test">Vue</a>
  <a href="http://www.baidu.com" target="test">百度</a>
</body>
</html>

其中,两个a标签都指向iframe,点击a标签则会在iframe中打开对应的页面
2)a标签属性

  • target="_blank" 在空白页打开
  • target="_self" 在当前页面打开
  • target="_parent" 在父页面打开
  • target="_top" 在顶级页面打开,即一直找父页面直到找不到,然后在此页面打开
  • download a标签内加download后会直接执行下载

3)href属性
a标签的无协议地址:
1)中的代码,在a标签的href属性中,如何我们不添加协议https的话,即:

<a href="//cn.vuejs.org/" target="test">Vue</a>

那么在访问此链接时,当前使用的是什么协议,此链接用的就是什么协议。如我们在本地打开页面,浏览器地址栏中开头显示是file://,所以此种情况下使用的协议为file。
1)中的代码,如果a标签内容如下:

<a href="cn.vuejs.org" target="test">Vue</a>

那么在点击a标签的时候,会认为href指向的是相对于当前文件路径的文件。

那么如果我们不使用file协议的话,如何使用//cn.vuejs.org来访问vue的官网呢?我们需要使用http协议,解决方法一是将代码上传到Github上,另外的方法是安装http-server。

sudo cnpm install -g http-server

安装完成后,在终端输入http-server -c-1,这个会直接帮助我们搭建一个服务器,并且可通过http://127.0.0.1:8080或者http://192.168.1.20:8080直接访问桌面文件,其中-c-1表示不添加缓存。此为a标签的无协议地址。

javascript伪协议,写法为:

href="javascript: alert(1)"     //则在点击a标签的时候会执行js代码

总的来说,a标签的href中可以写的内容为:

  • //cn.vuejs.org
  • #xxx ?name=123 ./xxx.html
  • javascript:;
7、form表单

1)form表单默认是发起get请求,但是我们常用form表单做post请求,所以在form标签中我们可以直接声明请求方式,即:

<form action="xxx" method="post"></form>    //表单中只支持Get和Post方式

2)button
在form表单中,如果没有提交按钮,且只有一个未定义type值的button,那么button会被提升为提交按钮,默认type为submit
3)input标签
input的type比较多,常用的有:button、submit、text、password、checkbox、radio

8、HTML5常用的语义化标签

很多标签在工作中都有涉及,不打算在进行介绍。但是对于HTML5中的语义化用的较少,打算在此处进行些介绍。

nav       //定义导航,可将导航内容放在此标签内
article   //定义独立的内容,可能的 article 实例为论坛帖子、报纸文章等。
          //eg:<article><a href="http://www.apple.com">Safari 5 //released</a><br />7 Jun 2010. Just after the announcement //of the new iPhone 4 at WWDC, Apple announced the release //of Safari 5 for Windows and Mac......</article>
audio     //标签定义声音,比如音乐或其他音频流。
aside     //定义其所处内容之外的内容
          //eg:<p>Me and my family visited The Epcot center this //summer.</p><aside>
          //<h4>Epcot Center</h4>The Epcot Center is a theme park in //Disney World, Florida.</aside>
canvas    //定义图形,比如图表和其他图像
datalist  //定义选项列表
footer    //定义 section 或 document 的页脚。
header    //定义文档的页眉(介绍信息)
hgroup    //用于对网页或区段(section)的标题进行组合
section   //定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
video     //定义视频,比如电影片段或其他视频流

本文已转载至个人博客知乎,如果错误,敬请指正。转载请注明出处。

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

推荐阅读更多精彩内容

  • ********** 未经本人允许,严禁转载任何网站 ********** 本人在慕课网学习HTML+CSS基础课...
    zhaolion阅读 10,956评论 46 548
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,629评论 1 92
  • 查看作者原文 一、前端开发做什么 传统前端:html+css+js HTML5大前端:各种端的兼容开发、Ajax+...
    秋风喵阅读 585评论 0 2
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,173评论 1 41
  • 三阶走到现在,越来越感受到同学们的巨大变化。今晚和广新聊了很多,他带给我阳光洒脱的感觉,这在他之前是根本做不到的。...
    卜芳阅读 210评论 1 2