HTML总结

最新推荐文章于 2021-12-10 15:28:10 发布

星灭233

最新推荐文章于 2021-12-10 15:28:10 发布

阅读量368

点赞数 2

分类专栏：知识总结文章标签： html 前端

本文链接：https://blog.csdn.net/ksx2333/article/details/113519862

版权

知识总结专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文章目录

html学习总结：

html学习总结：

一、html入门

1、什么是html？（先来一段标准的百度百科）

超文本标记语言（英语：HyperText Markup Language,简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
　　
HTML主要是用来给网页提供内容的，WEB的三层结构：
1，结构层（内容层）：HTML是给网页提供内容
2，样式层（修饰层）：CSS是给网页提供样式（美化网页）
3，行为层：JavaScript：是给网页提供行为的。
　　且这些都是纯文本，都可以用记事本打开
特点：
1，简单
2，通用性
3，平台无关

2、网页的编写

编写网页前，需要准备编辑器和浏览器。

1，编写软件：

你喜欢就好，实在不行就用txt记事本写（写完改后缀为html），无非是没有补充语句导致编写速度更慢罢了。软件：sublime_text、WebStorm、Visual Studio Code等。

2，查看效果：

使用浏览器查看效果，常用的有谷歌浏览器等。

3，第一个网页：

直接编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
内容
</body>
</html>

展示内容

4，HTML基本结构

我们可以把html看成三部分构成：文档声明+头部+主题内容。
在这个基本结构里：

<!DOCTYPE html>           <!--文档说明-->
<html lang="en">          <!--文档的根标签  lang指语言为en英语-->
<head>                    <!--网页的头部-->
    <meta charset="UTF-8"><!--元信息：网页的字符编码格式-->
    <title>第一个网页</title><!--网站的标题-->
</head>
<body>                    <!--主题内容-->
内容
</body>
</html>

5，HTML元素的构成与语法

一个html元素是由开始标签+标签内容+结束标签组成：
　　元素=开始标签+内容+结束标签
　　标签和元素不是同一个概念

6，HTML常见的基本标签

什么是标签：

单词 前后 加上 <>   <dog>
单标签和双标签：
    <dog> <dog />单标签：只有开始标签，没有结束标签，如果只是单标签，后面的/的可加可不加
    <pig></pig>双标签：有开始标签，又有结束标签，其中前面的为开始标签，后面的为结束标签。

属性：
    写在开始标签中的xxx="xxx"  <dog name="wangcai"></dog>
    name="wangcai"  整体叫属性  name叫属性名   wangcai属性值

元素：
    标签+属性+标签之间的内容 = 元素
    <dog name="wangcai">汪财</dog>
    标签：<dog></dog>
    属性：name="wangcai" 
    元素：<dog name="wangcai">汪财</dog>

写完代码一定要保存  保存后再运行。

(1),标题标签（h1~h6）

h1标签的使用：（headline缩写）
    一个新闻/文章/博客都会使用到h1标签
    一个网站的logo也会使用h1包起来（有利于SEO）

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

在这里插入图片描述

(2),段落标签

p标签的使用：（paragraph段落缩写）
    和语文中的段落是一个意思
一般配合<br/>分行使用

(3),超链接标签及其属性

作用:用于链接其它资源（网页，视频，图片......）,从而形成万维网。
格式: <a href=" " target="" title=" " name="">百度一下，你就知道</a>
a是anchor(锚点)的缩写
超链接标签常见的属性:
   1，href:用于链接到某个资源
   2，target:表示日标，我们在打开一个页面时，是要新窗口打开还是在当前窗口打开，或是在框架中打开，就取决于这个属性，
常见的属性值有两个:
                _blank表示在新窗口中打开
                _self表示在当前窗口中打开
   3，title:当鼠标放到链接上时，显示出title对应的属性值（内容）
   4，name:用于设置锚点。
   默认有俩个锚步：
       1，#top，表示不需要设置锚点，就可以返回顶部
       2，#，表示不需要设置锚点，就可以返回顶部
       3，不带#表示重新加载（刷新）

(4),图像标签及其属性
作用：用来在页面上显示一张图片
格式：<img src="“alt=”“title=”"/>
　　img是image（图片）的缩写
　　src是source（源）的缩写
在实际开发中，可以使用width,height属性改变图片大小（单位一般为px像素）
width：宽度
height：高度
alt（alternate替代缩写）属性：当图片路径错误或图片不存在时，显示alt对应的属性值（内容）；也有利于SEO（搜索引擎优化）
1）相对路径
    ./ 表示当前目录
    …/ 表示上一层目录
    没有 …/
2）绝对路径 目前来说，可能用的比较少
    C:\Users\Administrator\Desktop\html精讲\代码\imgs\img08.jpg

(5),div和span
作用：用来组织划分结构，没有任何语义，主要是配合CSS完成页面的布局，美化网页。
格式：

<div>这是一个div</div>
<span>这是一个span</span>

div是division(分隔)的缩写
span是跨度的意思。
div主要用于划分大的块，大的区域。span是负责分隔一个模块中非常小的一个内容

(6),元素分类

块级标签：可以独立成行 div h1-h6 p ul ol dl form （能设置宽高）
行内标签：不会独立成行，从左往右依次排列span a em strong button;
　　　　　width和height是不起作用的；
　　　　　border和background是正常有效的； （不能设置宽高，能并列）
　　　　　padding和margin在水平方向是有效的，在竖直方向无效
行内块：不会独立成行，从左往右依次排列img input （能设置宽高，能并列）

我们可以使用css样式改变标签的属性：
display：block变成块级标签
display：inline变成行内标签
display：inline-block行内块
这样便使其拥有了相关标签的属性。

hr标签：
表示一行横线

二、列表标签

1、无序列表ul（unorder list缩写）

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。
type(disc  square  circle)

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

在这里插入图片描述

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

2、有序列表ol（order list缩写）

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
type(A a 1 I i)

<!--<ol type="A">-->属性为大写字母排序
<ol>             
    <li>啥</li>
    <li>什么</li>
    <li>我咋知道</li>
</ol>

在这里插入图片描述

3、自定义列表dl（define list缩写）

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
dl dt dd  define list title description缩写

<dl>
    <dt>啥</dt>
    <dd>什么</dd>    
    <dt>啥</dt>
    <dd>什么</dd>
</dl>

在这里插入图片描述

三、表格

在html中创建表格，也是一组标签，最核心的标签有如下几个：

<table> <tr> <th></th> </tr> <tr> <td></td> </tr>  </table> 
(tr: table row缩写) (th:table header缩写) (td:table description缩写)

<table>
    <tr>
        <th>年龄</th>
        <th>性别</th>
        <th>姓名</th>
    </tr>
    <tr>
        <td>15</td>
        <td>男</td>
        <td>张三</td>
    </tr>
    <tr>
        <td>16</td>
        <td>女</td>
        <td>狗蛋</td>
    </tr>
    <tr>
        <td>14</td>
        <td>男</td>
        <td>李四</td>
    </tr>
</table>

在这里插入图片描述

1、table表格的相关属性有：

align(对齐方式)
border(边框的宽度)
bgcolor（表格背景颜色）
cellspacing（单元格之间的距离）
cellpadding（单元格中的内容与单元格边框的距离）
height（表格的高度） width （表格的宽度）

2、tr(table row)表格行的相关属性有：

align(水平方向的居中方式（left center right）)
valign(竖直方向的居中方式（top middle bottom）)
bgcolor(行的背景)
span表示跨度合并的意思
th td: rowspan（行合并） colspan（列合并）

3、可以通过做课程表进行练习表格的具体使用方法。

在这里插入图片描述
课程表源码：

<table border="1" align="center" width="500"height="300" bgcolor="aqua"cellpadding="1"cellspacing="1">
    <tr>
        <th ></th>
        <th bgcolor="blue"align="left"></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>

    </tr>
    <tr>
        <td rowspan="6">上午</td>
        <td bgcolor="blue"align="right">7:30-8:00</td>
        <td colspan="5"align="center">早自习</td>
    </tr>
    <tr>
        <td bgcolor="blue"align="right"vlige="top">8:00-8:40</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>语文</td>
        <td>英语</td>
    </tr>
    <tr>
        <td bgcolor="blue"align="right"vlige="top">8:50-9:30</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>语文</td>
        <td>英语</td>
    </tr>
    <tr>

        <td bgcolor="blue"align="right">课余时间</td>
        <td colspan="5"align="center">课间操</td>
    </tr>
    <tr>
        <td bgcolor="blue"align="right"vlige="top">10:00-10:40</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>语文</td>
        <td>英语</td>
    </tr>
    <tr>
        <td bgcolor="blue"align="right"vlige="top">10:50-11:30</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>语文</td>
        <td>英语</td>
    </tr>
    <tr>
        <td >午休</td>
        <td bgcolor="blue"align="right">休息时间</td>
        <td colspan="5"align="center">午餐加午休</td>
    </tr>
    <tr>
        <td bgcolor="blue"align="right"vlige="top"rowspan="4">晚上</td>
        <td align="right"> 上课时间</td>
        <td> 音乐</td>
        <td> 体育</td>
        <td> 音乐</td>
        <td> 音乐</td>
        <td> 体育</td>
    </tr>
    <tr>
        <td bgcolor="blue"align="right"vlige="top">上课时间</td>
        <td> 体育</td>
        <td> 音乐</td>
        <td> 体育</td>
        <td> 音乐</td>
        <td> 体育</td>
    </tr>
    <tr>
        <td bgcolor="blue"align="right"vlige="top">上课时间</td>
        <td> 体育</td>
        <td> 音乐</td>
        <td> 体育</td>
        <td> 音乐</td>
        <td> 体育</td>
    </tr>
    <!--colspan合并列rowspan合并行-->
    <tr>
        <td bgcolor="blue"align="right"vlige="top">上课时间</td>
        <td > 体育</td>
        <td> 音乐</td>
        <td> 体育</td>
        <td> 音乐</td>
        <td> 体育</td>
    </tr>
</table>

四、表单

1、表单展示

233

源码：

<form action="">单行文本输入框：<input type="text"></form>
<form action="">密码输入框：<input type="password"></form>
复选框：<input type="checkbox">帝骑
<input type="checkbox">时王
<input type="checkbox">阿妈粽<br>
单选框：<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">无性
<!--多个单选框，如果指定同个name，表示多选一-->
<form action="">文件域：<input type="file"></form>
<form action="">提交：<input type="submit"></form>
<form action="">清空表单信息，重新填写：<input type="reset"></form>
<form action="">图片提交按钮：<input type="image"></form>
<form action="">按钮：<input type="button"></form>
<form action="">隐藏域：<input type="hidden"></form>
<form action="">单行文本输入框：<input type="text" maxlength="10" value="hello"></form>

value是指定默认值
maxlength限定输入字符个数
placeholder 此属性提供可描述输入字段预期值的提示信息（hint）。（类似上面最后一行）；该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

2、了解表单

功能：用于搜集不同类型的用户输入的内容
　　有了表单，网页的内容可以由用户自己创建，那么对于网页来说，我们既是网页创建者，也是网页的消费者。

3、常用的表单元素

（1）、from元素

功能：用于创建一个表单
重要属性:
　　1，action:表示当前表单中的内容提交给哪个页面进行处理
　　2，method:表示当前表单提交的方式，常见的有get和 post方式，默认是get提交

get和post区别

get特点：
　　　　　提交数据放到浏览器的地址栏中；
　　　　　数据提交不安全；
　　　　　提交数据的量比较少。
post特点：数量提交是以表单的形式提交；
　　　　　数据提交相对安全；
　　　　　提交数据量会更大。

（2）、input元素

表示输入框，有多种形式，可以根据type属性来确定显示哪种输入框。
注意细节:
　　1，对于input来说，它的type的默认值是text，表示单行文本
　　2，对于input，最好给它添加一个name属性，作用是用于将用户输入的内容提交给要处理这个数据的页面。

（3）、select和option

作用：用来实现下拉列表
在这里插入图片描述
源码如下：

生日:
<!--value里面加的值是后面的值得默认值，后面不写则为value值；multiple表示多选-->
<select name=""id="1" size="2" multiple="multiple">
    <option value="" disabled="disabled" >请选择</option>
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
</select>年
<select name=""id="2">
    <option value="">--</option>
    <option value="">100</option>
    <option value="">200</option>
    <option value="">300</option>
</select>月
<select name=""id="3">
    <option value="">--</option>
    <option value="">10000</option>
    <option value="">20000</option>
    <option value="">30000</option>
</select>日<br>

disabled 属性规定应该禁用 input 元素。
被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 JavaScript 来删除 disabled 值，将 input 元素的值切换为可用。
注释：disabled 属性无法与 input type=“hidden” 一起使用。
outline:none; 可以消除点击框出现的变化

multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值。
注释：multiple 属性使用欧冠与以下类型：email 和 file。
可接受多个值的文件上传字段：实例：

<form action="" method="get">
  Select images: <input type="file" name="img" multiple="multiple" />
  <input type="submit" />
</form>

label 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果你在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

label标签的 for 属性应当与相关元素的 id 属性相同。

<html>
<body>

<p>请点击文本标记之一，就可以触发相关控件：</p>

<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

</body>
</html>

（4）、textarea（文本域）

作用：提供输入大量文本的输入框，比如，QQ空间中发表状态，贴吧发表帖子等。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。
在这里插入图片描述

源码展示：

<textarea rows="5" cols="20">
在这个区域里，所有浏览器都支持这个标签。
在这个区域里，所有浏览器都支持这个标签。
在这个区域里，所有浏览器都支持这个标签。
在这个区域里，所有浏览器都支持这个标签。
在这个区域里，所有浏览器都支持这个标签。
在这个区域里，所有浏览器都支持这个标签。
在这个区域里，所有浏览器都支持这个标签。
</textarea>

五、其他

关于鼠标光标的一些变化标签.
下面展示一些 内联代码片。

<p>cursor：光标；请把鼠标移动到单词上，这样会看到鼠标指针的变化：</p>
<span style="cursor: auto">Auto自动（汽车）</span><br />
<span style="cursor: crosshair">Crosshair十字</span><br />
<span style="cursor: default">Default默认</span><br />
<span style="cursor: pointer">Pointer指针</span><br />
<span style="cursor: hand">Hand指针手</span><br />
<span style="cursor: move">Move移动</span><br />
<span style="cursor: e-resize">e-resize右箭头</span><br />
<span style="cursor: ne-resize">ne-resize右上箭头</span><br />
<span style="cursor: nw-resize">nw-resize左上箭头</span><br />
<span style="cursor: n-resize">n-resize朝上箭头</span><br />
<span style="cursor: se-resize">se-resize右下箭头</span><br />
<span style="cursor: sw-resize">sw-resize左下箭头</span><br />
<span style="cursor: s-resize">s-resize下箭头</span><br />
<span style="cursor: w-resize">w-resize左箭头</span><br />
<span style="cursor: text">text文本</span><br />
<span style="cursor: wait">wait等待</span><br />
<span style="cursor: help">help问号 帮助</span><br />

HTML之marquee(文字滚动)详解：https://www.cnblogs.com/smiler/p/4892918.html
简略版：

<marquee style="align-content: center;text-align: center;align-items: center; margin:0px auto; width: 100px">
老特，我相信你会赢的，千万不要灰心呀，加油，我们看好你，不到最后一秒，你就是总统，让美国民众热情点，加油
</marquee>

六、总结

综上，了解完这些你应该就可以运用一些基本的html技术进行编程。但标签是死的，运用的思路是活的。如何通过这些实现更多的功能和更好的排版展示才是真正学会html的关键。
　　当然html也只是前端编程的基本骨架，css和js才是真正对网页的美化关键。以盖房子类比，必须定义这个房子有多长、多宽，每一块面积如何规划，例如哪里是卫生间、哪里是饭厅、哪里是卧室。将这些定义好，网页也就有了最基本的样子。
　　总之，HTML 就是用来布局网页中的每一个元素的。
　　CSS 中的“样式”就是指外观。还以盖房为例，定义好了各个空间，房子也盖起来了，但还要装修，例如给客厅贴壁纸、给卧室铺地板。CSS 就是起装修作用的，要和 HTML —起配合使用。
　　JavaScript 是一种脚本语言，它在网页中的作用是控制 HTML 中的每一个元素，有时要删除元素，有时要添加新元素。