HTML常用标签

1.HTML简介:

HTML:Hyper Text Markup Language

1.1 HTML基本结构

<!--
    文档声明,标识当前网页的版本的
    该声明标识网页是遵循html5语法规范的
    编写网页时,一定要编写的文档声明,
    在某些浏览器中,如果不写文档声明,会导致浏览器进入到怪异模式
 -->
<!doctype html>
<!-- html网页中根标签,一个页面中有且只有一个根标签
    网页中的所有内容都应该写在根标签的内部
 -->
<html>

    <!-- 
        网页的头部,head标签中的内容,不会在页面中直接显示
        浏览器根据head中的内容来解析网页,搜索引擎也可以根据他们来检索网页
     -->
    <head>
                <!-- 使用meta来设置页面的字符集 -->
        <meta charset="utf-8" />
        <!-- 
            网页的标题,一般会在页面的标签头部显示 
            所属引擎在检索一个网页时,会主要检索title中的内容
            并依据该内容,来判断网页的主要内容,
            title中的内容会影响到网站在搜索引擎中的排名
        -->
        <title>我是title</title>

    </head>


    <!-- 网页的主体,网页中所有的可见内容,都应该写在body中 -->

    <body>
        <h1>这是一个非常漂亮的网页</h1>
    </body>

</html>

1.2 标题标签 ,段落标签,水平线,换行,加粗,斜体

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>常用的标签</title>
</head>
<body>

<!-- 标题标签
    在HTML一共有h1 ~ h6 六级标题
    6级标题中 h1最大 h6最小
    从h1 到 h6 重要性依次降低
    h1最重要,h2其次 依次递减

    搜索引擎检索页面时,h1仅次于title,也会影响到页面在搜索引擎中的排名
        一个页面一般只有一个h1标签

    一般页面中只会使用h1 ~ h3

-->
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>

<!-- 段落标签 使用p标签来表示一个段落
        段落标签会独占一行,并和其他内容会有一个距离
-->
<p>第一次</p>
<p>今天天气真不错</p>
<hr />
<!--
    在HTML中,默认将多个空格和换行认为是一个空格
    使用br标签来表示一个换行
-->
<p>
    床前明月光<br />
    疑是地上霜<br />
    举头望明月<br />
    低头思故乡<br />
</p>

<!-- 水平线,可以在页面的指定位置输出一条水平线 -->
<hr />

<!--加粗:<strong>…</strong>-->
<!--斜体:<em>…</em>-->

</body>
</html>

1.3 列表标签

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>列表</title>
    </head>
    <body>
        <!-- 
            列表类似于购物清单
                HTML中一共有三种列表
                1.无序列表
                    - 使用ul标签来创建一个无序列表
                    - 使用li向无序列表中添加列表项
                    - 无序列表默认使用 圆点 来作为项目符号    
                2.有序列表
                    - 有序列表和无序列表类似,不同的是它使用ol来创建其他的都和无序列表一样
                    - 有序列表使用有序的序号 作为项目符号    
                3.定义列表    
                    - 定义列表用来对一些内容做解释说明的
                    - 使用 dl 来创建一个定义列表
                    - 在dl中使用dt,来创建一个定义项
                    - 使用dd来创建一个对定义项的描述


                - 列表之间可以互相嵌套,可以在有序列表中放无序列表,也可以在无序列表放有序列表
        -->
        <ul>
            <li>西红柿</li>
            <li>大茄子</li>
            <li>小辣椒</li>
        </ul>

        <ol>
            <li>桃花源记</li>
            <li>岳阳楼记</li>
            <li>小石潭记</li>
            <li>醉翁亭记</li>
        </ol>

        <p>菜谱</p>
        <ul>
            <li>
                鱼香肉丝
                <ol>
                    <li>鱼</li>
                    <li>香</li>
                    <li>肉丝</li>
                </ol>
            </li>
            <li>宫保鸡丁</li>
            <li>青椒肉丝</li>
        </ul>

        <dl>
            <dt>武松</dt>
            <dd>景阳冈上的大虎英雄,战斗力99</dd>
            <dd>后来打死西门大官人,后逃逸,出家为僧</dd>
            <dt>武大</dt>
            <dd>著名餐饮企业家,战斗力0</dd>
        </dl>


    </body>
</html>

1.4 链接标签(a标签)

<a href="path" target="目标窗口位置">链接文本或图像</a>
  • 注:href: 链接路径 target:链接在哪个窗口打开,常用值:_self、_blank

1.5 图像标签(照片)

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

推荐阅读更多精彩内容