HTML初级教程

1、HTML是超文本标记语言。(Hyper Text Markup Language)
2、HTML不是编程语言,而是一种标记性语言,标记语言是一套标记标签,HTML使用标记标签描述网页。
3、html文档的基本结构

<!DOCTYPE html>
<html>
  <head>
    <meta/>
    <title></title>
  </head>
  <body>
  </body>
</html>

4、<!DOCTYPE html>引用官方的DTD文件,主要是对标签引用的约束。但HTNL5不需要应用严格意义上的DTD文件。
5、html重要标签
  (1)head标签是HTML文档的头部标签,成对出现<head>...</head>
  (2)body标签是HTMl主题部分标签,成对出现<body>...</body>

  • head标签的主要元素
标签 用法
title 该元素用于定义文档标题
meta 用于HTML页面元数据
scripe 用于包含JavaScript脚本
link 用于链接外部css资源文件
style 用于定义内部css样式

 (1) title标签

  • 能在浏览器窗口中所能看到的,title标签使用户最看重的标签,是当前页面的主旨,应该将网站的最核心内容写到title中。
<title>我的第一个网页</title>

 (2) meta标签

  • 用于定义页面原信息
属性 用法
http-equiv 指定原信息的名称,该属性指定的名称具有特殊意义,它可以向浏览器传回一些有用的信息,帮助浏览器正确地处理网页内容
content 指定元信息名称,该名称值可以随意指定
name 指定元信息的值
<meta http-equiv="Content-type" content="text/html;charset=gb2312"/>
<meta name = "author" content = "zqn"/> 
<meta name = "keywords" content="梦想,加油"/>
<meta name = "description" content="为了梦想成功要加油"/>

6、常见的块级标签

  • 标题标签(从h1到h6字体大小依次变小)
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
  • 段落标签(这三个p标签分别会成三个段落显示)
<body>
<h2>歌手曲目</h2>
    <p>第一首:岑宁儿 追光者</p>
    <p>第二首:jam 七月上</p>
    <p>第三首:何洁 你要幸福啊</p>
</body>
 呈现效果:


歌手曲目

第一首:岑宁儿 追光者
第二首:周柏豪 走狗
第三首:何洁 你要幸福啊


  • 水平线标签(有一条水平线,用于分割)
<hr/>
  • 有序列表标签
<h3>我喜欢吃的水果</h3>
    <ol>
        <li>橙子</li>
        <li>圣女果</li>
        <li>柚子</li>
    </ol>
 呈现效果:


我喜欢吃的水果

1.橙子
2.圣女果
3.柚子


  • 无序列表标签
<h3>我想去的地方</h3>
    <ul>
        <li>北京</li>
        <li>上海</li>
    </ul>
 呈现效果:


我想去的地方

  • 北京
  • 上海

  • 分区标签(有几个div标签整体页面就会被分为几块,对网页进行整体分块布局)
<div>头部内容</div>
<div>导航内容</div>
<div>底部内容</div>

7、常见的行级标签(按行逐一显示,前后不会自动换行)

  • 文本格式化元素
标签 用法
<b> 定义粗体文本
<i> 定义斜体文本
< em > 定义强调文本,实际效果与斜体差不多
< strong > 定义粗体文本,与<b>的作用基本相同
< small > 定义小号文本
< sub > 定义下标文本
< sup > 定义上标文本
< bdo > 定义文本显示方向,内有dir属性,只能取ltr或rtl
<ul>
    <li><b>水</b>:H<sub>2</sub>O</li>
    <li><i>氧气</i>:O<sup>2</sup></li>
<ul>
 呈现效果:


  • :H2O
  • 氧气:O2

  • 超链接标签
<a href="链接地址"  target="目标窗口">链接文本或图片</a>

常用属性:

属性 作用
href 指定超链接所关联的另一个资源
target 指定框架集中的哪一个框架装载另一个资源,该属性可以是_self、_blank、_top、_parent四个值,分别代表自身、新窗口、顶层框架、父框架来装载新资源 `
<a href="http://baidu.com" target="_blank">百度网页</a><br/>
/*这条语句就是点击百度网页就会在新的窗口打开百度页面*/
  • 图像标签
<img src="图片地址" alt="提示文字">
<p><a href="http://baidu.com" target="_blank">
   <img src="lovely.jpg" alt="可爱的女生头像"/></a></p>
  • span标签(div标签和p标签)
<span>文本等行级内容</span>
  • 换行标签

< br/ >换行

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

推荐阅读更多精彩内容

  • 欢迎进入HTML的神奇世界 一、什么是HTML HTML的英文全称是Hypertext Marked Langua...
    Yumi__扶醉入香闺阅读 7,981评论 9 146
  • WWWCSS 实例 亲自试一试 什么是 HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标...
    hx永恒之恋阅读 227评论 0 0
  • Hypertext Marked Language(HTML),即超文本标记语言,是为“网页创建和其它可在网页浏览...
    淺笑C阅读 167评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,220评论 1 41