HTML 初识- (HTML5 标准)


超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

<!doctype html><!--声明HTML5文档-->
<html lang='en'><!--html根标签 lang翻译:成英文-->
    <head><!--网页的头部-->
        <meta charset = "UTF-8"><!--编码格式  UTF-8 国际编码 meta 元标签-->
        <meta name = "Author" content = "网页作者" ><!--作者-->
        <meta name = "Keywords" content = "关键词1,关键词2 给搜索引擎抓取用" ><!--关键字-->
        <meta name = "Description" content = "网页描述"><!--描述-->
        <title>Document</title><!--网页标题-->
        <link rel="stylesheet" href="style.css"><!--外部css样式/外链样式 href后面跟css文件地址-->
        <style type='text/css'>/*   style中写css */
            div{
                width:100px;    /* 宽度:100像素*/
                height:100px;   /* 高度:100像素*/
                background:red; /* 背景:红色 */
            }
            /*   {}前面写选择器,{}里面写样式 */
            /*style标签里面写内嵌(嵌入式)样式*/
        </style>
    </head>
    <body><!--网页主干:可视化区域-->
        <!--
            HTML:网页结构
            css:层叠样式 ---修饰,美化网页(网页化妆师)
            js(javascript): 脚本语言---网页效果,特效(网页魔术师)
        -->
        <div style='width:100px;height:100px;background:red'> </div><!--块/div标签-->
        <!-- style中写行间(内联/行内)样式 -->
    </body>
    <!-- script中写入javascript -->
    <script>
        var oDiv = document.getElementsByTagName('div');

        //console.log( oDiv );
        oDiv[0].onclick = function(){
            oDiv[0].style.background = 'green';
        }

    </script>
</html> 

标签


div标签

<div style=''> 我是div标签 </div>

标题标签

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>

段落标签

<p>这是一个段落。</p><!-- 段落标签 -->

链接标签

<a href='https://www.taobao.com/'> 超链接标签或者a标签 </a><!-- 超链接 -->

提示:在 href 属性中指定链接的地址。

图像标签

<img src="/images/logo.png" width="258" height="39" /><!-- 图片 -->

提示:在 src属性中指定图像的地址(相对路径/绝对路径)。
注意:图像的名称和尺寸是以属性的形式提供的。

列表标签

    <ul><!-- 无序列表标签 -->
        <li>
            <span> ul列表一</span>
        </li>
        <li>ul列表二</li>
        <li>ul列表三</li>
        <li>ul列表四</li>
    </ul>
    <ol><!-- 有序列表标签 -->
        <li>ol列表一</li>
        <li>ol列表二</li>
        <li>ol列表三</li>
        <li>ol列表四</li>
    </ol>
    <dl><!-- 自定义列表标签 -->
        <dt>dl列表标题</dt>
        <dd>dl列表一</dd>
        <dd>dl列表二</dd>
        <dd>dl列表三</dd>
        <dd>dl列表四</dd>
    </dl>

斜体标签

    <i>iiii</i>         <!-- 斜体标签 -->
    <em>emememem</em>   <!-- 强调 斜体 -->

粗体标签

    <b>加粗标签</b><!--粗体标签-->
    <strong>strongstrongstrongstrong</strong><!-- 强调 粗体 -->

水平线标签

    <hr/>   <!-- 水平线 -->

换行标签

    <br/>   <!-- 换行标签 -->

标签详解


img

<!doctype html> <!-- 文档类型:HTML文档(HTML5标准) --><!-- 注释:说明给开发人员看的 -->
<html lang='en'><!--html根标签 lang翻译:成英文-->
    <head><!--网页头部-->
    <meta charset='UTF-8'/><!--字符编码:UTF-8 国际编码-->
    <meta name='keywords' content='关键词1,关键词2 给搜索引擎抓取用'/>
    <meta name='description' content='网站描述'/>
    <meta name='Author' content='网页作者'/>
    <title>hello world</title><!--网页标题-->
    <style type='text/css'>/*   style中写css */
        div{/* width样式属性 */
            width:100px;    /* 宽度:100像素*/
            height:100px;   /* 高度:100像素*/
            background:red; /* 背景:红色 */
        }
            /*   {}前面写选择器,{}里面写样式 */
        img{
            width:100px;
            height:100px;
        }
    
    </style>
    </head>
    <body><!--网页主干:可视化区域-->
    <!--
        一、HTML CSS JS
            HTML:网页结构
            css:层叠样式 ---修饰,美化网页(网页化妆师)
            js(javascript): 脚本语言---网页效果,特效(网页魔术师)
        二、常用标签
            div
            img 
        三、img 详解
                属性:
                    src     定义图片路径
                    width   定义宽度,只给宽度,height会等比例缩放
                    height  定义高度,只给高度,width会等比例缩放
                    alt     定义图片出错是的提示内容,有利于seo,搜索引擎的抓取
                    title   定义鼠标移到图片上出现的描述      
    -->
        <div>
            <!-- src属性 -->
            <img src='images/1.jpg' width='650' height='459' alt='大自然'  title='hello world'/>
            <p title='我是p'>pppppppppppp</p>
        </div>
        
    </body>
    
</html> 

a标签

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

推荐阅读更多精彩内容

  • 1.HTML、XML、XHTML 有什么区别 HTML HTML含义:(HyperText Markup Lang...
    LouisJ阅读 803评论 0 1
  • 1.html、xml、xhtml HTML HTML(Hyper Text Mark-up Language)即超...
    饥人谷_小侯阅读 439评论 0 1
  • HTML与XML与XHTML三者之间的区别 HTML的简介超文本标记语言(HyperText Markup Lan...
    24_Magic阅读 349评论 0 1
  • 从“上网”说开去 1.上网就是请求数据 老师现在进行一个互联网原理的整体感知的教学,你注意,整体感知中,一些具体的...
    王裕杰阅读 1,083评论 0 1
  • HTML论述 HTML的简介 超文本标记语言(英语:HyperText Markup Language,简称:HT...
    熊蛋子17阅读 659评论 0 1