html从0到能看懂 - 水蓝的屑博客

本文章是萌新在”菜鸟教程”上进行学习后,总结而来的，方便日后复习,也可以用来让一些对html略有了解的人快速入门

dalao勿喷QAQ,有错误感谢指出

基础标签

<p>这是一个段落</p>
<h1>这是一个标题</h1>
<h2>这是一个小标题</h2>
<a href="https://www.baidu.com">这是一个链接</a>
<img loading="lazy" src="/images/logo.png" width="258" height="39"/>

基本语法

1. 以标签开始，以标签结束(有的在开始标签关闭，有的在结束标签关闭)

2. 某些html元素有空元素

3. 大多数html元素可拥有属性

其中

<body>定义了html主体</body>
<html>定义了整个html文档</html>

html空元素

<br/>
<br>

br就是空元素,一个br可以代表一个空行，空元素是在开始标签中关闭的

即使不加”/“也没有问题，但是加上是更好的写法

html属性

1. html元素可以设置属性

2. 属性可以在元素中设置属性

3. 属性一般描述于开始标签

4. 属性总是以名称/值对的形式出现，比如：name=”value”

例子：

<a href="www.baidu.com">超链接地址是由href属性定义的</a>

其中，属性值可以用单引号或者双引号，但是如果属性本身有双引号，那么就必须用单引号。比如 name=’“Vandarkholme”’

##html标题

1. h1是最大的标题，h6是最小的标题。

2. 浏览器会自动在标题前后添加空行

3. 重要提示: 确保html标题只用于标题，因为搜索引擎是根据标题来来编制索引的。

####分割线

<hr/>

hr是创建一个水平线

注释

<!-- 这是一个注释 -->

html段落

<p>这是一个段落</p>
<p>这是另一个段落</p>
<p>这是第一行<br>这是第二行<br>这是第三行</p>

html中一个或多个空格或者换行视作一个空格

html文本格式化

<b>加粗文本</b><br/>
<i>斜体文本</i>
<code>电脑自动输出</code>
这是<sub>下标</sub>和<sup>上标</sup>

除此之外，em定义着重文字，small定义小字号，strong加重语气，ins插入字，del删除字

html链接

<a href="url">链接文本</a>

target属性

使用target属性，可以定义链接文档在何处显示

<a href="https://www.baidu.com" target="_blank">从新的页面打开百度</a>

id属性

id可以创建在任意元素中，并且对于读者来说是隐藏的

<a id="tips">23333</a>
<a href="#tips">访问23333</a>

html头部

1. title定义了html文章标题

2. base定义了所有链接的默认url

3. meta提供了meta标记，用来描述关键词，字符等。

head元素

在head中可以加入脚本(scripts)，样式文件(css)，以及各种meta信息。

可以添加在头部的元素标签有:title,style,meta,link,script,noscript,base

header标签用于定义文档页眉之类的信息

title元素

1. 标签定义了不同文档的标题

2. 在html/xhtml中是必须的

3. 定义了浏览器工具栏的标题

4. 网站添加到收藏夹时，显示在收藏夹中的

5. 显示在搜索引擎结果的标题

base元素

描述了所有链接的默认地址(如果其他元素不写地址的话，默认就是这个)

<head>
<base href="https://www.baidu.com" target="_blank">
</head>

link元素

1. 定义了文档与外部资源之间的关系

2. 通常用于链接到样式表

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

style元素

1. 定义了html文档的样式文件引用地址

2. 也可以直接添加样式来渲染html文档

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

meta元素

1. 为搜索引擎提供关键词

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

2. 为网页提供描述性内容

<meta name="description" content="23333333">

3. 定义网站作者

<meta name="author" content="水蓝"

4. 每30秒刷新该网站

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

script元素

用于加载脚本文件

htmlcss

添加方式

1. 内联样式:在html中使用style属性

2. 内部样式表:在头部head区域中使用style元素来包含css

3. 外部引用: 使用外部的css文件

最好还是使用外部引用的css文件

内联样式

<p style="color:blue;margin-left: 20px;">23333</p>

改变背景颜色

<body style="background-color: blue">
<h2 style="background-color: yellow">2333</h2>
<p style="background-color: green">233333</p>
</body>

字体颜色大小

font-family字体,color颜色,font-size字体大小

<h1 style="font-family: Verdana">23333</h1>
<p style="font-family: Arial;color:red;font-size: medium">233</p>

通常用font-family等来定义字体颜色等，而不是用font标签

文本对齐方式

使用text-align属性来定义文字水平垂直的定义方式

<h1 style="text-align: center">这是一个居中的对器</h1>

其实是text-align属性取代了center标签

内部样式表

当某个文件需要特别的样式的时，就可以使用内部样式表,可以在head部分使用style标签进行定义

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

外部样式表

当样式需要用到很多页面的时候，外部样式表就是最佳选择

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

对于绝大部分标签，内联和外引两种方式都可以,且修改父级标签特性，子级标签特性也会改变，但是某些标签属性不会改变,需要专门修改子级标签比如a标签

<a href="#" style="color: blue" rel="nofollow">这个只能使用内联方式</a>

html图像

图像标签img和原属性src

1. img是空标签,意思是,它只包含属性,并且没有闭合标签

2. 要在页面上显示图像,需要使用源属性src,它的值就是图像地址url

3. 浏览器会将图像显示在标签出现的地方，哪怕是两个文字段落之间

写法如下:

<img src="url" alt="some_text">

alt 属性

1. alt属性是在图像无法加载出来时，显示的文本

2. alt的值是由用户定义的

设置图像高度宽度

1. height高度,width宽度

2. 单位默认是像素

<img src="url" alt="23333" width="114" height="514">

图片加载较慢，慎用图片

图像标签

1. map定义图像地图

2. area定义图像中可点击的区域

html表格

由table标签定义
tr代表行
td代表单元格

使用例

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

边框属性

border即为边框属性,如果将其值改为0,则就没有边框了

html表头

表头使用th标签定义

使用例

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

html列表

html无序列表

是一个项目的列表,使用粗体小圆点进行标记
使用ul标签，每一行用li标签分开 ```html

Coffee
Milk

#### html有序列表
1. 使用数字进行标记

2. 使用ol标签,每一行用li标签分开

```html
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

html自定义列表

这个列表是由项目及其注释的组合
以dl标签开始,项目以dt开始,注释以dd开始

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

html区块

div与span

html可通过div和span将元素组合起来

区块元素

html元素大多分为块区元素或者内联元素,块区元素在显示时,会以新的一行开始

比如:h1,p,ul等

内联元素

内联元素在显示的时候,不会另起一行

div元素

是一个块区元素,可用于组合其他html元素的容器,没有特殊含义
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
div元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用table元素进行文档布局不是表格的正确用法,table元素的作用是显示表格化的数据。

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

span元素

是内联元素,可作为文本容器,无特殊含义
当与 CSS 一同使用时，元素可用于为部分文本设置样式属

<p>我的老婆2233娘有 <span style="color:red">蓝色</span> 的眼睛。</p>

表单和输入

表单

是一个包含表单元素的区域,通过form来设置

表单-输入元素

多数情况下,是用到输入标签input的,输入类型由type定义

文本域

输入字母与数字时，要用到文本域

<form>
Your Name:<input type="text" name="Name">
</form>

密码字段

即明文不会被显示,用小圆点代替

<form>
Password:<input type="password" name="pwd">
</form>

单选按钮

<form>
<input type="radio" name="sex" value="male"> male<br\>
<input type="radio" name="sex" value="female"> female
</form>

复选框

<form>
<input type="checkbox" name="vehicle" value="bike"> bike <br\>
<input type="checkbox" name="vehicle" value="car"> car
</form>

提交按钮

由type=”submit”定义

当用户单击确认按钮时，表单的内容会被传送到另一个文件
表单的动作属性定义了目的文件的文件名
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="233.php" method="get" >
Username:<input type="text" name="user">
<input type="submit" value="submit">
</form>

html框架

iframe语法

<iframe src="url"></iframe>

url指向不同的网站

高度与宽度

利用高度与宽度定义iframe标签的高度与宽度

<iframe src="bilibili.com" height="22"width="33"></iframe>

移除边框

frameborder属性定义了是否显示边框,设置为0则为不显示

<iframe src="https://www.bilibili.com" frameborder="0"></iframe>

使用iframe来显示目标链接网页

若使用iframe来显示目标链接网页的内容,怎目标链接属性必须使用iframe属性

<iframe src="https://www.bilibili.com"></iframe>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

注意,下面链接的target是iframe_a,所以会在上面的iframe里面显示

html脚本

script标签

用来定义客户端的脚本
既可以包含脚本语句,也可以通过src属性指向外部链接
```
<script>
document.write("FuckYou!")
</script>
```

noscript标签

在浏览器不支持或者禁用脚本时显示

<noscript>你的浏览器是上个世纪的罢?</noscript>

html字符实体

有些字体是被预留的,比如说大于号,小于号

所以,为了显示小于号,我们只能这么写&it

html统一资源定位(url)

url可以是域名或者ip地址

定义的规则为:scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http

host - 定义域主机（http 的默认主机是 www）

domain - 定义因特网域名，比如 runoob.com

:port - 定义主机上的端口号（http 的默认端口号是 80）

path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

filename - 定义文档/资源的名称

常见scheme类型:

http: 超文本传输协议

https: 安全超文本传输协议(加密)

ftp: 文件传输协议

后记

~~什么,就这还要来个后记?~~ 不管怎么说,寒假时间没有白费,希望看到这里的你可以过的开心

今后也这么快乐的生活下去吧 ~~为什么突然这么中二啊喂~~