自建网站 | 知识储备HTML篇

前言

结构
HTML 用于描述页面的结构(半小时内能学会)

表现
CSS控制页面中元素的样式

行为
JavaScript 用于响应用户的操作

1. HTML 超文本标记语言

Hypertxt Markup Language,负责三要素中的结构,使用标签的形式来标识网页中不同的组成部分,所谓的超文本指的是超链接,可以用超链接从一个页面跳转到另外一个页面

<标签名> 标签体 </标签名>
一个开始 一个结束 结束的标签名前面要斜杠
<h1>回乡偶书</h1>
<h2>1</h2>
<h2>贺知章</h2>
<p> 少小离家老大回</p> 
<p> 少小离家老大回</p> 
<p> 少小离家老大回</p> 
<p> 少小离家老大回</p> 

网页中有且只有一个根标签

<title> ### 注释
<!-- 
	html注释内容....
-->

1.1 实体、标签、行列、块

<!doctype html>
<!--html body 网页中的所有内容都要写在元素里边 -->
<html>
<!--head 是网页的头部 内容不会直接在网页中出现 主要用来帮助流浪器和搜索引擎来解析网页-->
    <head>
        <title>搜索引擎检索到的 所显示的 超链接的名字</title> 
        <!--用来设置网页的元数据-->
        <meta charset="utf-8">
         <!-- 给搜索引擎搜索的-->
        <meta name ="keywords" content="HTML, CSS, JavaScript">
        <meta name ="description" content="这是一个学习的test文件">
         <!-- 
            meta主要用于设置网页中的一些元素局,元数据不是给用户看 
            charset 指定页面的字符集
            name 指定数据的名称
            content 指定的数据的内容

            h1 - h6 六级标题
            标题标签都是块元素
        页面独占一行的元素叫做块元素
         -->
        <meta http-equiv="Content-Type" content="text/html">
    </head>

    <!--body是-->
    <body>
        <hgroup> <!--用作标题分组 可以将一组相关的额标题同时放进hgroup-->
            <h1>网页的大标题</h1> 
            <h2>二级标题</h2>
            <h3>一般到三级标题</h3>
        </hgroup>
        <!--h1网页的一级标题-->
       <!--
            布局标签(结构化语义标签)
       -->
       <!--
            Header 表示网页的头部
            main 表示网页的主体部分(一个页面中只会有一个mian)
            footer 表示网页的底部
            nav 表示网页中的导航
            aside 和主题相关的其他内容/侧边栏
            article 表示一个独立的文章
        -->
        <p>在p标签的内容属于一个段落</p>
        <p>em标签用于语音语调的一个<em>加重 </em> </p>
        
        <header></header>
        <main> </main>
        <nav></nav>
        <aside></aside>
    </body>

</html>

1.2 列表

<!doctype html>
<!--html body 网页中的所有内容都要写在元素里边 -->
<html>
<!--head 是网页的头部 内容不会直接在网页中出现 主要用来帮助流浪器和搜索引擎来解析网页-->
    <head>
        <title>搜索引擎检索到的 所显示的 超链接的名字</title> 
        <!--用来设置网页的元数据-->
        <meta charset="utf-8">
    </head>

    <!--body是-->
    <body>
        <!--
            列表(list)
                1.铅笔
                2.尺子
                3.橡皮
            在html中也可以创建列表 列表分为三种
            1,有序
            2. 无序
            3. 定义列表
            
            无序列表 使用ol标签来创建无序列表
                使用li表示列表项
            
            定义列表 使用dl标签来创建一个定义列表
                使用dt来表示定义的内容
                使用dd来对内容进行解释说明
            
            列表之间可以相互嵌套
        -->
    </body>

    <ul> <!--un-->
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构,结构用来规定哪里是标题 哪里是段落 </dd>
        <dd>结构表示网页的结构,结构用来规定哪里是标题 哪里
            <dd>结构表示网页的结构,结构用来规定哪里是标题 哪里
    </dl>

    <ul> <!--un-->
        <li>
            aa
            <ul>
                <li>aa-1</li>
                <li>aa-2</li>
            </ul>
        </li>
</html>

1.2 超链接

<!doctype html>
<!--html body 网页中的所有内容都要写在元素里边 -->
<html>
<!--head 是网页的头部 内容不会直接在网页中出现 主要用来帮助流浪器和搜索引擎来解析网页-->
    <head>
        <title>超链接</title> 
        <!--用来设置网页的元数据-->
        <meta charset="utf-8">
    </head>

    <!--body是-->
    <body>
        <!--
            超链接可以让我们从一个页面跳转到另外一个页面
            或是当前页面的其他位置

            超链接也是一个行元素 
        -->  

        <a>超链接</a>
        <a>超链接</a>
        <a>超链接</a>
        <a>超链接</a>
        <a>超链接</a>
        <a href="http://www.baidu.com">超链接</a> 
        <br>超链接</br>
        <a href="07.列表.html">内部超链接</a>
        <a id = "Buttom" href="#back_to_top">回到顶部</a>
        <!--
            Lorem 自动生成一组

            可以直接将超链接的href属性设置为#,
            这样点击超链接以后页面不会发生跳转,
            而是转到当前页面的顶部的位置
        -->  
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nihil voluptatum quo non, magnam sequi aut veniam. Repudiandae doloremque adipisci vero vitae, asperiores voluptatum recusandae suscipit voluptas itaque enim qui!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adip
        <a id = "back_to_top" href="#Buttom">回到顶部</a>
        <!--根据id 跳转到当前页面的某个控件位置-->
        
        <!--在开发中可以将#作为超链接的路径的展位符使用-->
        <a id = "广告位招租" href="#">跳转控件招租</a>
        
        <!--可以使用 javascript:;来作为href的属性,此时点击这个超链接什么也不会发生-->
        <a href="javascript:;">跳转新的超链接</a>
        
    </body>
</html>

这里的超链接用法包括:跳转的当前页面某个标签位置,外部超链接

1.3 图片

<!doctype html>
<!--html body 网页中的所有内容都要写在元素里边 -->
<html>
<!--head 是网页的头部 内容不会直接在网页中出现 主要用来帮助流浪器和搜索引擎来解析网页-->
    <head>
        <title>图片</title> 
        <!--用来设置网页的元数据-->
        <meta charset="utf-8">
    </head>
    <!--
        img元素属于替换元素(基于块和行内元素之间)
        属性:
            src属性指的是外部图片的路径

            alt图片的描述 有些浏览器会在图片加载时显示
    -->
    <body>
        <img src="http://placehold.it/" alt="超链接图片">

        <img src="./img/1.gif" alt="本地图片">
    	
    	<img scr ="data:image/png;base64,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" alt="base64编码的图片">
    <!--
       jpeg(jpg)
       一般用来显示图片 不支持透明效果 颜色比较丰富

       gif
        支持颜色比较少 但是颜色单一 会被压缩变得模糊
        
        png
        颜色丰富 支持透明 不支持动图

        webp
        谷歌专门退出来用来显示网页中的图片的一种格式
        它具备其他图片格式的所有优点 而且稳健还特别小
        但是兼容性差  

        base64
         -可以将图片使用base64对图片进行编码 加载时候非常快
    -->   
    </body>
</html>

1.4 内联框架

<!doctype html>
<!--html body 网页中的所有内容都要写在元素里边 -->
<html>
<!--head 是网页的头部 内容不会直接在网页中出现 主要用来帮助流浪器和搜索引擎来解析网页-->
    <head>
        <title>框架 </title> 
        <!--用来设置网页的元数据-->
        <meta charset="utf-8">
    </head>
    <!--
        img元素属于替换元素(基于块和行内元素之间)
        属性:
            src属性指的是外部图片的路径

            alt图片的描述 有些浏览器会在图片加载时显示
    -->
    <body>
      <!--
        内联框架:用于向当前页面引入一个其他页面
        scr 指定引入页面的路径
        frameborder 指定内联框架的边框
      -->
      
      <iframe src="https://www.qq.com/" width="800" height="300" scrolling="no" framborder="0" frameborder="0"></iframe>
    </body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值