视觉艺术

HTML基础

2020-02-14  本文已影响0人  Syaroing阿樱

HTML简介

HTML标签

<标签名>标签内容</标签名>
<标签名/>

<!--成对出现的标签举例-->
<p></p>
<!--自结束标签举例-->
<img/>

元素

HTML属性

1.在标签中（开始标签或自结束标签）还可以设置属性
2.属性是一个名值对（x=y）
3.属性用来设置标签中的内容如何显示
4.属性和标签名或其他属性应该使用空格隔开
5.属性不能瞎写，应该根据文档中的规定来编写，
6.有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来

HTML的注释

<！--    -->

1.注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释
2.注释用来对代码进行解释说明的
3.开发中一定要养成良好的编写注释的习惯，注释要求简单明了
5.注释还可以将一些不希望显示的内容隐藏
6.注释不能嵌套

HTML的发展

进制问题

十进制(日常使用)

二进制（计算机底层的进制）

八进制(很少用)

十六进制(

编码问题

编码

字符集

乱码

解决

<meta charset="utf-8">

文档声明

文档声明简介

<!doctype html>
<!Doctype HTML>

怪异模式

HTML网页的基本结构

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>

    <!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
    <head>

        <!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
        <meta charset="utf-8">
        
        <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
        <title>网页的标题</title>

    </head>

    <!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
    <body>

        <!-- h1网页的一级标题 -->
        <h1>网页的大标题</h1>

    </body>

</html>

实体

            &实体的名字;

                &nbsp; 空格
                &gt; 大于号
                &lt; 小于号
                &copy; 版权符号

meta标签

meta标签的作用

meta主要用于设置网页中的一些元数据，元数据不是给用户看,而是给浏览器看的

meta标签常见属性

                    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
                    <meta name="keywords" content="网购,网上购物,在线购物,网购网站,网购商城,购物网站,网购中心,购物中心,卓越,亚马逊,卓越亚马逊,亚马逊中国,joyo,amazon">

                    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

title标签

title标签的内容会作为搜索结果的超链接上的文字显示

语义化标签

简介

在网页中HTML专门用来负责网页的结构
所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

标题标签

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

hgroup标签

<hgroup>
            <h1>回乡偶书二首</h1>
            <h2>其一</h2>
      </hgroup>

p标签

<p>在p标签中的内容就表示一个段落</p>

em标签

<p>今天天气<em>真</em>不错！</p>

strong标签

<p>你今天必须要<strong>完成作业</strong>！</p>

引用标签

blockquote

 鲁迅说：
      <blockquote>
          这句话我是从来没有说过的！
      </blockquote>

q

 子曰<q>学而时习之，乐呵乐呵！</q>

换行标签

 <p>在p标签中的内容就 <br> 表示一个段落</p>

块元素与行内元素(内联元素)简介

块元素（block element）

行内元素（inline element）

块元素与行内元素的使用

布局标签（结构化语义标签)

<header></header>
<main></main>
<footer></footer>

<nav></nav>
<aside></aside>
<article></article>
<section></section>

 <div></div>

 <span></span>

列表（list）

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

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

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

   <ul>
        <li>
            aa
            <ul>
                <li>aa-1</li>
                <li>aa-2
                    <ul>
                        <li>aa-1</li>
                        <li>aa-2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

超链接

超链接的含义

超链接可以让我们从一个页面跳转到其他页面， 或者是当前页面的其他的位置

定义超链接

<a href="#">这是一个新的超链接</a>
<br><br>
<a href="javascript:;">这是一个新的超链接</a>

2.target属性，用来指定超链接打开的位置
可选值：
_self 默认值 在当前页面中打开超链接
_blank 在一个新的要么中打开超链接

<a href="https://www.baidu.com">超链接</a>
<a href="07.列表.html">超链接2</a>

图片标签

名称 特点 用途
jpeg(jpg) 1.支持的颜色比较丰富
2.不支持透明效果
3.不支持动图		 一般用来显示照片
gif 1.支持的颜色比较少
2.支持简单透明
3.支持动图		 颜色单一的图片，动图
png 1.支持的颜色丰富
2.支持复杂透明
3.不支持动图		 颜色丰富，复杂透明图片（专为网页而生）
webp 1.这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
2.它具备其他图片格式的所有优点，而且文件还特别的小
3. 缺点：兼容性不好
base64 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片 一般都是一些需要和网页一起加载的图片才会使用base64

内联框架

用途

用于向当前页面中引入一个其他页面

标签

<iframe></iframe>

属性

src 指定要引入的网页的路径
frameborder 指定内联框架的边框

<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>

音视频

音频

<audio controls>
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

视频

使用video标签来向网页中引入一个视频, 使用方式和audio基本上是一样的

  <video controls>
        <source src="./source/flower.webm">
        <source src="./source/flower.mp4">
        <embed src="./source/flower.mp4" type="video/mp4">
    </video>
上一篇 下一篇

猜你喜欢

热点阅读