1、认识HTML及标签

什么是HTML:超文本标记语言(HyperText Markup Language,简称 HTML); 

怎么学HTML :HTML 是一门标记语言,标记语言由一套标记标签组成,学习 HTML,其实就是学习标签 �;

HTML基本结构

<!DOCTYPE html>                     <!-- 文档类型 -->
<html>
<head>                              <!-- 网页头部 -->
    <meta charset="utf-8">          <!-- 国际编码 -->
    <title>html基本结构</title>     <!-- 网页标题 -->
</head>
<body>                              <!-- 网页主体 -->
    Hello
    <p>我是网页主体</p>
</body>
</html>

标题标签

<!--一个页面通常只出现一个h1标签有利于搜索引擎搜索-->
标题标签
<h1>我是h1标签</h1>
<h2 id="box">我是h2标签</h2>
<h3>我是h3标签</h3>             <!--id是唯一的,不可重复-->
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<h7>我是h7标签</h7>

单标签

<hr>        <!--hr水平线标签-->
<br>        <!--br换行标签-->

小于号:<       &lt;            
大于号:>       &gt;            
空格号:        亲&nbsp;爱         
空白位:        亲&emsp;爱    
& 字符:&        &amp;         
版权号:©        &copy; 
注册商标:®      &reg;       
TM: ™           &trade;

粗/斜体标签

<b>物理粗体标签</b><br>       <!--只是物理加粗-->   
<strong>粗体标签,有利于SEO搜索</strong><!--不仅能加粗,还有利于搜索引擎搜索-->

<h2>斜体标签</h2>
<i>物理斜体</i><br>             <!--斜体作用-->
<em>em斜体,有利于搜索</em> <!--强调斜体,利于搜索引擎搜索-->
<strong><em>啦啦啦</em></strong>

列表标签

<h3>无序列表</h3>
    <ul type="square">
        <li>1</li>
        <li>2</li>
    </ul>
    <!-- type
       disc  默认  小黑圆点
       circle  空心圆
       square  小方框
       -->
    <h3>有序列表</h3>
        <ol type='A' reversed start='3'>    <!--3-C-倒数第几个字母-->
            <li>A</li>
            <li>B</li>
        </ol>
    <!-- reversed   降序排序
             sorted     升序
             start      有序列表起始值
             -->
<h3>自定义列表</h3>
    <dl>
        <dt>标题</dt>
        <dd>E</dd>
        <dd>F</dd>
        <dd>G</dd>
    </dl>

图片标签

<img src="图片链接" alt="关键字,用于SEO">    

超链接a标签

<a href="图片链接">xxx</a>
<a href="http://www.baidu.com"" target='_self'>超链接>>>去百度</a><br>
<a href="#">#-刷新当前页面</a><br>
<a href="javascript:void(0);">死链接,没有反应</a><br>
<a href="#ss" name='xx'>跳转到顶部</a>
<!--
      只有拥有name属性的a标签才有锚点
      其他标签可以通过id属性实现锚点
      target属性
          _self 当前页面打开  默认
          _blank 在新窗口打开
      -->
HTMLclass/id书写规范
   1.名字用小写字母
   2.以英文开头,可以包含英文字母,数字,_,-,不能使用中文
   3.驼峰命名
       className  第二个单词首字母大写
   4.id命名
       id只能有一个名字,而且在页面中相同的名字只能出现一次,相当于身份证号码一样
   5.class命名
       class可以出现多次,而且相同的名字可以有多个,相当于人名一样

div+span

div:块状元素,独占一行。可以设置大小。可以通过修改display属性改变。
pan:行间元素,无法设置狂傲,大小由内容撑起。可以通过修改display属性改变。

个人笔记,便于日后查看。

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

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,472评论 1 45
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,236评论 1 41
  • 序言 整理谷歌的小弟的笔记,版权归原作者所有,本文仅作整理,原文链接:http://blog.csdn.net/l...
    在代码下成长阅读 1,147评论 1 5
  • 学习目标: 了解常用浏览器 掌握WEB标准 理解标签语义化 掌握常用的排版标签 掌握常用的文本格式化图像链接等标签...
    淡淡疯阅读 1,261评论 0 3
  • 一不留神,娃又扯出这么一堆纸,玩得不亦乐乎,给她一包抽纸,就是整个世界,快乐的玩吧,健康长大!
    大连鱿鱼丝阅读 192评论 0 0