作者：凌逆战

地址：https://www.cnblogs.com/LXP-Never/p/11229886.html

　　HTML称为超文本标记语言，不属于编程语言的范畴，HTML使用标记标签来描述网页。HTML运行在浏览器上，由浏览器来解析。网页运行在浏览器上，是数据展示的载体。网页由浏览器、服务器和协议组成。

服务器：向服务器发送用户请求指令并接收和解析数据展示给用户。
服务器：存储数据，处理并响应请求。
协议：规范数据在传输过程中的打包方式

网页有两大优势即时响应和无需安装和更新。

即时响应：更新服务端页面即完成更新，客户端重新加载即兑现内容。
无需安装和更新：无需安装任何应用软件，只需要一个浏览器执行即可。

开发前的准备

运行环境：浏览器，默认选择chrome浏览器，作为网页文件的运行环境。
调试工具：浏览器自带的调试工具，使用快捷键”F12″或右键”检查”打开。
开发工具：不限，选用个人习惯的即可。(HBuilder、Sublime、VSCode、pycharm、EditPlus、Webstrom等)

语法介绍

　　HTML又称为超文本标记语言，超文本标记语言能够让浏览器识别和解析的语言，通过标签的形式构建页面结构和填充内容。HTML书写的网页文件使用.html或.htm作为文件后缀。

代码基本结构

　　每个网页基本的代码结构，都是由以下代码结构组成的。通过下面的代码可知，每个网页都是由HTML标签代码 + JS代码 + CSS样式代码 组成的。HTML代码不区分大小写，建议都小写。CSS、JS、HTML的注释语法都不同，其实注释语法不需要特别记忆，只需要ctrl+/ 快捷键就能自动注释(pycharm默认编辑器，点setting>Languages&Frameworks>python Template Languages>HTML>Template Languages>none)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*网页CSS样式代码*/
    </style>
</head>
<body>
<!--    HTML标签结构-->

    <script>
        // 网页事件,JS代码
    </script>
</body>
</html>

代码解析：

<!DOCTYPE html>：这句话告诉浏览器，使用HTML5标准来解析这个网页

<html>：HTML文档开始的标志和文档结束标记

<head>：网页的头部，可在head中设置网页标题，还可以引入外部的资源文件

<title>：包含文档的标题

<body>：网页的身体，包含可见的页面内容

<!–注释–>：注释

<script>：网页的事件，包含Java Script代码

<style>：网页的样式，包含css代码

HTML标签

HTML标签也会成为标记或元素，用于网页中标记内容，是由< >包围的关键词成对出现的，标签名不区分大小写，推荐小写表示。标签对中第一个标签是开始标签，第二个标签是结束标签。

<标签>内容</标签>

标签分为行内标签(inline)和块标签(block)

行内元素：每个行内元素独占一行，高和外边距不可改变；宽度就是他的文字和图片宽度；内联元素只能容纳文本或者其他的内联元素。常用的行内元素有：<span>、<a>、<br>、<input>、<img>
块元素：块元素总是在新的一行上开始，且多个块元素能同时在一行；高度、行高以及内外边距都可以设置；宽度缺省是他的容器的100%，除非设定一个宽度。块元素可以容纳其他块元素和内联元素，p元素除外，段落标签只能嵌套行内元素,不能嵌套块元素。常用的块元素有：<div>、<h1>~<h6>、<form>、<hn>、<ul>、<table>

HTML标签分为双标签和单标签

双标签：成对出现，包含开始标签和结束标签 <html></html>
单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合，也可以不加“/”。<br>或者<br/>都可以

标签的属性：标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。

同一个标签中可以添加若干组标签属性，使用空格间隔。

<img src="imgs/img01.jpg" width="200px" height="200px">

标签嵌套：在双标签中书写其他标签，称为标签嵌套；

标签元素的嵌套关系：嵌套结构中，外层元素称为父元素，内层元素称为子元素；多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素；平级结构互为兄弟元素

常用标签

<!doctype html>：文档类型声明，便于浏览器正确解析标签及渲染样式

<!doctype html>

<html> </html>：HTML文档开始的标志和文档结束标记

<html> </html>

<head>头部元素

头部设置，可在head中设置网页标题，引入外部的资源文件

<head>元素中可以插入 <title>、<script>、<style>、<meta>、<link>、 <noscript>、<base>

<base> </base>：设置网页的默认URL，因此该网页的其他 src 可以使用相对路径。案例。

<head>
　　<base href="http://www.runoob.com/images/" target="_blank">
</head>

<link> </link>：定义了一个文档和外部资源之间的关系。通常用来链接样式

<head>
　　<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<style> </style>：可以定义文档样式文件引用地址；也可以直接在<style>中添加样式

<head>
　　<style type="text/css">
　　　　body {background-color:yellow}
　　　　p {color:blue}
　　</style>
</head>

<meta>元素：定义基本的元数据，以供浏览器解析。

为搜索引擎定义关键词：

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者

<meta name="author" content="Runoob">

每30秒刷新当前页面

<meta http-equiv="refresh" content="30">

设置网页字符编码，如果中文出现乱码，可以设置编码格式为utf-8，或者gbk。

<meta charset="utf-8">

<script> </script>：定义JavaScript脚本文件，或者写JS代码

通过 JavaScript 输出 “Hello world”：

<head>
    <script>
        document.write("Hello World!")
    </script>
</head>

<title> </title>：设置网页标题，显示在网页选项卡上方

<title>网页标题</title>

<body>主体元素

</body>网页主体部分，显示网页主要内容

<body>
   网页主体内容
</body>

接下来连在一起窥探一下网页的基本结构框架。

<!-- HTML文档开始的标志 -->
<html> 
   <!-- 头部设置，可在head中设置网页标题，引入外部的资源文件 -->
   <head>
       <!-- 设置网页标题，显示在网页选项卡上方 -->
       <title>网页标题</title>
       <!-- 设置网页字符编码 -->
       <meta charset="utf-8"> 
   </head>
   <!-- 网页主体部分，显示网页主要内容 -->
   <body> 
       网页主体内容
   </body>
</html><!-- 文档结束-->

文本标签

标题标签

自带加粗效果，从h1~h6字体大小逐级递减

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

段落标签<p></p>

<p>段落文本</p>

属性:

title=”文字”：鼠标移上去显示的文字
style=”text-align:center”：文本居中

文本格式化标签

<b>或<strong>：加粗文本

<i>或<em>：定义斜体文本

<u>或<del>：删除线

<ins>：下划线

<big> & <small>：放大字体 & 缩小字体

<sub> & <sup>：下标(块元素) & 上标(块元素)

<pre>：定义预格式文本，被包裹的文本是什么格式就以什么格式输出

<address>：定义地址

<bdo>：定义文字方向，rtl：从右向左，ltr：从左向右

<span>：行分区，用于对特殊文本进行特殊处理

<br>：换行，单标签

<hr>：水平线，单标签

　　某些情况下，浏览器会将一些特殊字符按照 HTML 的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写。

使用 &lt; 在页面中呈现 "<"
使用 &gt; 在页面中呈现 ">"
使用 &nbsp; 在页面中呈现一个空格
使用 &copy; 在页面中呈现版权符号"©"
使用 &yen; 在页面中呈现人民币符号"￥"

区域块

块级元素在浏览器显示时，通常会以新行来开始。

块级容器 <div> </div>

<div>元素没有特定的含义，由于它是块级元素，浏览器会在其前后拆行，<div>元素常用于文档布局结构划分，结合CSS实现网页布局

快捷键: div#top

<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

行内容器 <span> </span>

<span>元素没有特定的含义，由于它是内联元素，因此可以在同一行显示。

媒体标签

图片标签 <img>

<img src=”” alt=””>：用于在网页中插入一张图片

<img href="#top" src="" width="" height="" title="鼠标停留时显示" alt="图片加载失败">

属性：

href：锚, 可以快速定位到锚所对应的位置.
src：用于给出图片的URL，必填。
alt：用于设置图片加载失败后的提示文本
width/height：用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
title：用于设置图片标题，鼠标悬停在图片上时显示

<map name=””></map>：定义图像地图，name值要等于<img>的usemap属性值。

<area></area>：定义图像地图中可点击的区域

属性

coords：规定区域的坐标
href：规定区域的目标 URL
shape：规定区域的形状。default(默认)、rect(矩形)、circle(圆圈)、poly(连接线)

如果规定的区域是矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

如果规定的区域是园：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

合在一起使用

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

音频标签<audio>

<audio controls>
    <source src="horse.mp3" type="audio/mpeg">
</audio>

<audio> 元素支持的3种文件格式：MP3、Wav、Ogg。

属性：

autoplay：音频就绪后立马播放
controls：显示音频控件(播放/暂停按钮)
src：规定音频文件的URL
loop：循环播放
muted：静音播放

视频 <video>

　　<video> 元素提供了播放、暂停和音量控件来控制视频。<video>分别支持MP4、WebM、Ogg格式的音频。<video> 元素支持多个 <source> 元素，<source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls>
    <!--浏览器将使用第一个可识别的格式-->
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <!--提供给不支持 video 元素的浏览器显示的-->
    您的浏览器不支持 HTML5 video 标签。
</video>

图形标签 <canvas> </canvas>

　　<canvas>标签用来定义图形容器，必须通过脚本(JavaScript)来绘制图形。

绘制画布

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Canvas 坐标

　　绘制正方形fillRect(x1,y1,x2,y2)，使用JavaScript来绘制图像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>
    var c = document.getElementById("myCanvas"); //找到 <canvas> 元素对象
    var ctx = c.getContext("2d");   //创建 context 对象
    ctx.fillStyle = "#FF0000";  // ctx对象填充红色样式
    ctx.fillRect(0, 0, 150, 75);    //ctx对象填充正方形(x1,y1,x2,y2)
</script>

注意：getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Canvas 路径

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

<script>
    var c = document.getElementById("myCanvas");//找到 <canvas> 元素对象
    var ctx = c.getContext("2d");//创建 context("2d") 对象
    ctx.moveTo(0, 0);       //定义线条开始坐标
    ctx.lineTo(200, 100);   //定义线条结束坐标
    ctx.stroke();　　　　//使用stroke()方法来绘制线条
</script>

Canvas 圆形

arc(x,y,r,start,stop)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Canvas 文本

font – 定义字体
fillText(text,x,y) – 在 canvas 上绘制实心的文本
strokeText(text,x,y) – 在 canvas 上绘制空心的文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Canvas – 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等，各种形状可以自己定义不同的颜色

createLinearGradient(x, y, x1, y1) – 创建线条渐变
createRadialGradient(x, y, r, x1, y1, r1) – 创建一个径向/圆渐变
addColorStop()方法指定停止颜色，必须使用两种或两种以上停止颜色，参数使用坐标来描述，可以是0至1.

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    // 创建渐变
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");

    // 填充渐变
    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
</script>

Canvas – 图像

drawImage(image, x, y)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

超链接标签

　　用户可以点击超链接实现跳转至其他页面，默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

属性：

href：锚，用于设置目标文件的URL，也可以指向某个id号属性的元素，必填。
target：用于设置目标文件的打开方式，默认在当前窗口打开。
- target=”_self”：当前窗口打开
- target=”_blank”：新建窗口打开
- target=”_top”：回到网站首页
- target=”_parent”：回到上一界面

列表标签

无序列表 ul>li

默认用实心圆点标识列表项

快捷键: ul>li*3

<ul>
    <li>列表项 1</li> 
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

有序列表 ou>li

默认使使用阿拉伯数字标识每条数据，可以使用start属性设置起始的值，默认为1

快捷键: ol>li*3

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

列表嵌套，在已有列表中嵌套添加另一个列表

<ol>
    <li>
        西游记
        <ul>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙和尚</li>
        </ul>
    </li>
</ol>

表格标签<table>

表格由行和单元格组成，常用于直接的数据展示或辅助排版，基本结构如下：

<table></table>：创建表格

属性：

border：规定单元格边框

<caption>表名</caption>：表名

<tr></tr>：行标签，创建一行

<td></td>：列标签，创建一列

3行5列表格快捷键 table>tr*3>td*5

<!-- 创建表格标签,宽度200个像素,表框1,表格间距0 -->
<table width="200px" border="1" cellspacing="0">
　　<caption>表名</caption>

     <!-- 创建行标签 -->
    <tr>
        <!-- 行中创建单元格以显示数据 -->
        <td>姓名</td>
        <td>年龄</td>
        <td>班级</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>20</td>
        <td>一(1)班</td>
    </tr>
</table>

单元格合并

　　用于调整表格结构，分为跨行合并 和 跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整。

单元格属性	作用	取值
colspan	跨列合并单元格	无单位数值
rowspan	跨行合并单元格	无单位数值

<table border="1">
    <tr>
        <th>姓名</th>
        <td>李小明</td>
    </tr>
    <tr>
        <th rowspan="2">电话</th>
        <td>010-1234567</td>
    </tr>
    <tr>
        <td>13912321213</td>
    </tr>
</table>

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">电话</th>　　<!--跨越两列-->
    </tr>
    <tr>
        <td>李小明</td>
        <td>010-1234567</td>
        <td>13912321213</td>
    </tr>
</table>

表单标签 <form> </form>

　　表单用于收集数据并提交给服务器，由表单元素和表单控件组成。表单元素允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单标签使用<form> </from>来设置

属性：

action：设置数据的提交地址
method：设置数据的提交方式，默认为get方式，可以设置为post
onsubmit：设置表单数据提交时的触发事件的执行函数(事件绑定中详细介绍)

<form action="" method="" onsubmit="">
    <!--此处为表单控件-->
</form>

输入元素 input

输入类型是由类型属性type定义。文本域的默认宽度是 20 个字符。

属性

type：设置控件类型，如果值为”password”则表示密码不可见，如果为“text”则为普通文本
- text：普通文本
- password：密码，不可见
- radio：单选按钮
- checkbox：复选按钮
- submit / reset：提交和重置
- button：按钮
- color：选择颜色
- data：选择日期
name：设置控件名称，最终与值一并发送给服务器
value：设置控件的值
placeholder：设置输入框中的提示文本
maxlength：设置输入框中可输入的最大字符数
checked：设置单选按钮或复选按钮的默认选中
selected：设置下拉菜单的默认选中
readonly：只读,就是不让输入

普通文本 type=”text”

<label for="name">姓名：</label>
<input type="text" id="name" readonly placeholder="请输入用户名" name="name">

密码 type=”password”

        <div>
            <label for="pass">密码：</label>
            <input type="password" 
                   id="pass" 
                   placeholder="请输入密码"
                   name="pass">
        </div>

单选按钮 type=”radio”

<input type="radio"  name="sex" value="1"  checked readonly />男
<input type="radio" readonly name="sex" value="2" />女

复选按钮 type=”checkbox”

<input type="checkbox" name="like" />编程
<input type="checkbox" name="like2" checked />游戏
<input type="checkbox" name="like3" />阅读

提交和重置 type=”submit \ reset”

<input type="submit" value="注册" />
<input type="reset" disabled value="重置" />

按钮 type=”button”

<input type="button" value="Hello world!">

输入多行文本内容

<textarea name="demo" id="demo" cols="30" rows="10">
    默认文本
</textarea>

下拉列表

下拉列表select，id要对应label的值

<option>中如果定义了selected属性，则会默认先选中它。

<select name="xl" id="xl">
    <option value="1">大学</option>
    <option value="2">中学</option>
    <option value="3" selected>小学</option>
</select>

最后融会贯通的运用一下表单元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <div>
            <label for="name">姓名：</label>
            <!-- 占位符 -->
            <input type="text"
                   id="name"
                   readonly
                   placeholder="请输入用户名"
                   name="name">
        </div>
        <div>
            <label for="pass">密码：</label>
            <input type="password"
                   id="pass"
                   placeholder="请输入密码"
                   name="pass">
        </div>
        <div>
            <label for="xl">学历：</label>
            <!-- 下拉列表框元素 使用 option 设置列表项 value 是列表的值-->
            <select name="xl" id="xl">
                <option value="1">大学</option>
                <option value="2">中学</option>
                <option value="3">小学</option>
            </select>
        </div>
        <div>
            <label for="sex">性别：</label>
             <!-- 单选按钮元素 相互排斥时，将 name 属性值设置为同一个-->
             <input type="radio"
                    name="sex"
                    value="1"
                    checked
                    readonly
                    />男
             <input type="radio" readonly name="sex" value="2" />女
        </div>
        <div>
            <label for="like">爱好：</label>
            <input type="checkbox" name="like" />编程
            <input type="checkbox" name="like2" checked />游戏
            <input type="checkbox" name="like3" />阅读
        </div>
        <div>
            <label for="demo">简介：</label>
            <!-- 输入多行多列文本内容 -->
            <textarea name="demo"
                      id="demo"
                      cols="30"
                      rows="10">
            </textarea>
        </div>
        <div>
            <input type="submit" value="注册" />
            <input type="reset" disabled value="重置" />
        </div>
    </form>
</body>
</html>

View Code

HTML属性

　　HTML可以设置属性，一般在开始标签中添加标签属性信息，属性总是以名称/值对的形式出现，比如：name=”value”。

由于HTML每个标签都包含很多属性，菜鸟教程总结了常用标元素的属性 HTML 标签参考手册

在此列出用的最多的几个属性：

属性	描述
class	为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式(style)
title	描述了元素的额外信息(作为工具条使用)

HTML全局属性

语义元素

　　语义元素能够清楚的描述其意义给浏览器和开发者。

　　许多现有网站都包含以下HTML代码： <div id=”nav”>，<div class=”header”>，或者 <div id=”footer”>，来指明导航链接，头部，以及尾部。

　　HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

<header>元素：描述了文档的头部区域，在页面中可以使用多个<header>元素。

<nav>元素：定义页面导航链接

<article>元素：定义独立的内容，

<section>元素：定义文档中的节，比如章节、页眉、页脚或文档的其他部分。

<aside>元素：定义页面主区域之外的内容(比如侧边栏)

<footer>元素：描述了文档的底部区域

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/159160.html

前端——HTML

语法介绍

代码基本结构

HTML标签

常用标签

<head>头部元素

<body>主体元素

文本标签

标题标签

段落标签<p></p>

文本格式化标签

区域块

块级容器 <div> </div>

行内容器 <span> </span>

媒体标签

图片标签 <img>

音频标签<audio>

视频 <video>

图形标签 <canvas> </canvas>

Canvas 坐标

Canvas 路径

Canvas 圆形

Canvas 文本

Canvas – 渐变

Canvas – 图像

超链接标签

列表标签

无序列表 ul>li

有序列表 ou>li

表格标签<table>

表单标签 <form> </form>

输入元素 input

下拉列表

HTML属性

语义元素

发表回复

前端——HTML

语法介绍

代码基本结构

HTML标签

常用标签

<head>头部元素

<body>主体元素

文本标签

标题标签

段落标签<p></p>

区域块

块级容器 <div> </div>

行内容器 <span> </span>

媒体标签

图片标签 <img>

音频标签<audio>

视频 <video>

图形标签 <canvas> </canvas>

Canvas 坐标

Canvas 路径

Canvas 圆形

Canvas 文本

Canvas – 渐变

Canvas – 图像

超链接标签

列表标签

无序列表 ul>li

有序列表 ou>li

表格标签<table>

表单标签 <form> </form>

输入元素 input

下拉列表

HTML属性

语义元素

相关推荐

发表回复