HTML 学习笔记(基础部分)

什么是 HTML?

HTML(Hyper Text Mark-up Language )即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee 提出。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样,你只要使用鼠标在某一文档中点取一个图标,Internet 就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。 HTML 是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。

  • HTML 语言是一种标记语言,不需要编译,直接由浏览器执行;
  • HTML 文件是一个文本文件,包含了一些 HTML 元素,标签等;
  • HTML 文件必须使用 htmlhtm 为文件名后缀;
  • HTML 是大小写不敏感的,<HTML> 与< html> 是一样的。

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag);
HTML 标签是由尖括号包围的关键词,例如 <html>;
HTML 标签通常是成对出现的,例如 <html> 和 </html>;
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签闭合标签
浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

常用标签

标签 h1 ~ h6

HTML 用 <h1><h6> 来定义正文标题,每个正文标题自成一段。

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

效果如下:

heading.png

标签 a

HTML用 <a> 来表示超链接,英文叫 anchor。 <a> 可以指向任何一个文件源:一个 HTML 网页,一个图片,一个影视文件等。点击 <a></a> 当中的内容,即可打开一个链接文件,href 属性则表示这个链接文件的路径。

<a href="https://avatars0.githubusercontent.com/u/5558904?v=3&s=460">Avatar of Github</a>

效果如下:

a1.png
a2.png

标签 table

HTML 表格用 <table> 表示,一个表格可以分成很多行(row),用 <tr> 表示,每行又可以分成很多单元格(cell),用 <td> 表示,表头用 <th> 表示。

<table border="1">
    <tr>
        <th>姓名</th>
        <th>专业</th>
        <th>学校</th>
    </tr>
    <tr>
        <td>安洋</td>
        <td>计算机</td>
        <td>西安理工大学</td>
    </tr>
    <tr>
        <td>王娇</td>
        <td>自动化</td>
        <td>西安电子科技大学</td>
    </tr>
</table>

效果如下:

table.png

标签 ul 和 ol

  1. 无序列表采用符号标记每个列表项,比如黑色圆点。无序列表由<ul> 开始,每个列表项由 <li> 开始。
  2. 有序列表中,每个列表项前标有表示顺序的数字。有序列表由 <ol> 开始,每个列表项由 <li> 开始。
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>葡萄</li>
</ul>

<ol>
    <li>苹果</li>
    <li>香蕉</li>
    <li>葡萄</li>
</ol>

效果如下:

list.png

标签 input 和 form

<form> 标签用于为用户输入创建 HTML 表单。<input> 标签用于收集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、单选框等。

  1. 文本输入 type = "text"
  2. 提交按钮(提交表单) type = "submit"
  3. 复选框 type = "checkbox"
  4. 单选按钮输入 type = "radio"
  5. 密码输入框(即输入的文字用*表示)type = "password"
<form>
    Username:
    <input type="text">
    <br>
    <br> Password:
    <input type="password">
    <br>
    <br>
    <input type="radio">Male
    <input type="radio">Female
    <br>
    <br>
    <input type="checkbox">苹果
    <br>
    <input type="checkbox">香蕉
    <br>
    <input type="checkbox">葡萄
    <br>
    <br>
    <input type="submit" value="Submit">
</form>

效果如下:

input.png

标签 div 和 span

<div> 可定义文档中的分区或节(division / section),可以把文档分割为独立的、不同的部分。<span> 标签被用来组合文档中的行内元素,<span> 没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化。

<div> 和 <span> 默认都没有对标签内的对象进行任何格式化渲染,其主要用于应用样式表。两者最明显的区别在于 div 是块元素,而 span 是行内元素(也译作内嵌元素)。

<div>
    <h3>This is heading 3</h3>
    <p><span style="color:blue">Hello, </span>this is a paragraph</p>
</div>

效果如下:

div_span.png

标签 img

<img> 标签可以向网页中嵌入一幅图像,从技术上讲,<img> 标签创建的是被引用图像的占位空间,并不是直接在网页中插入图像,而是从网页上链接图像。。<img> 标签有两个必需的属性:src 属性 和 alt 属性。

![Avatar of Github](https://avatars0.githubusercontent.com/u/5558904?v=3&s=460)

效果如下:

img.png

标签 button

<button> 标签定义一个按钮,在 <button> 中可以放置内容,比如文本或图像。<button> 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。

<button type="button">Submit</button>

效果如下:

button.png

标签 pre

<pre> 标签可定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。

<pre>
                   早发白帝城


          朝辞白帝彩云间,千里江陵一日还。

          两岸猿声啼不住,轻舟已过万重山。
</pre> 

效果如下:

pre.png

标签 em 和 i

<em> 标签告诉浏览器把其中的文本表示为强调的内容,这意味着把这段文字用斜体显示。<i> 标签显示斜体文本效果,和 <em> 标签类似。

<em>我是em</em> 
<br>
<i>我是i</i> 

效果如下:

em_i.png

相关资料:

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • 原 Blog 链接:HTML基础学习笔记 自学 html 基础笔记 Web 前端简单介绍 web 前端包含: pc...
    任凱阅读 1,377评论 0 5
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,510评论 32 459
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 2,828评论 0 11
  • 当下发生的一切,就是你“学习”最好的道场。面对自己此刻的人生,临在,感悟,行动……把这个当下活好。所有的瞬间,连缀...
    雨霁Sunny阅读 570评论 0 0