html基础

xusisi123

已于 2024-05-21 21:08:08 修改

阅读量420

点赞数 5

文章标签：前端

于 2024-05-21 19:46:30 首次发布

本文链接：https://blog.csdn.net/lisi_123/article/details/139099835

版权

html的基本架构

//声明是html文件
<!DOCTYPE html>
//html的根元素
<html>   
         //html的头部标签，包含了文档的元数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
	    <head>
	        // 定义使用网页编码格式是utf-8  该标签可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
		    <meta charset="UTF-8">   
		    //元素描述了文档的标题
		    <title>xxxx</title> 
	    </head>
	   <body>
	</body>
</html>

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
对于设置后出现网页乱码问题，其实归根到底就是：你通过 meta 标签设置的编码和网页文件在保存时所使用的文档编码不相同造成的！至于有的人说什么 360 浏览器默认 GBK 会造成乱码，我只想说的是，只要你在 html 文件里写了 <!doctype hmtl>和，浏览器就绝对会按照 utf-8 编码解析网页，没有第二种可能！再次重点说明：保存 html 文件时，文档编码和 meta 设置的编码，一定要相同，只要不相同，就一定会出现乱码! 之所以一定要写上 <!doctype html>，就是为了防止浏览器的怪异模式，强制浏览器按照标准模式渲染网页！

html的基本标签

link标签

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

link标签定义文档与外部资源的关系。最常见的用途是链接样式表。
link标签的属性
- href：通常都是引入一个url值，用来定义被链接文档的位置
- hreflang：定义被链接文档中文本的语言。
- media：规定被链接文档将显示在什么设备上。
- rel：必需。定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写。它的值通常有以下几种
- type：规定被链接文档的 MIME 类型。

alternate	文档的替代版本（比如打印页、翻译或镜像）。
stylesheet	文档的外部样式表。
start	集合中的第一个文档。
next	集合中的下一个文档。
prev	集合中的上一个文档。
contents	文档的目录。
index	文档的索引。
icon	 导入表示文档的图标。
glossary	在文档中使用的词汇的术语表（解释）。
copyright	包含版权信息的文档。
chapter	文档的章。
section	文档的节。
subsection	文档的小节。
appendix	文档的附录。
help	帮助文档。
bookmark	相关文档。

script 标签

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

<script src="script.js"></script>

script 标签用于定义客户端脚本，比如 JavaScript。
script 标签既可包含脚本语句，也可以通过 “src” 属性指向外部脚本文件。

h1,h2,h3,h4,h5 标签

h1到h5标签分别表示不同的标题，用来区分文章

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>

<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>

<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>

<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>

<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>

标题大小与字体大小的关系
1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

注释

<!-- 这是一段注释的文本 -->

注释一般用于对一块区域代码的解释或者备注

p 标签

<p>西海情歌</p>

p 标签是段落标签

br 换行标签

<p> 
使用 br 元素<br>在文本中<br>换行。 
</p>

hr 换行线标签

<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>
<hr>
<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

a 链接标签

<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>

self：用于在当前选项卡中跳转，也就是不新建页面跳转。默认选项
_blank ：用于在新的选项卡中跳转，也就是新建页面跳转
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。

列表标签

ol 定义有序列表
ul 定义无序列表
li 定义列表项
dl 定义列表
dt 自定义列表项目
dd 定义自定列表项的描述

无须列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

自定义列表

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

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。

img 标签

元素向网页中嵌入一幅图像

<img src="相对路径/绝对路径" height="200px" width="200px" alt="上海鲜花港 - 郁金香" />

alt 规定图像的替代文本。
src 规定显示图像的url
width 规定图片的高度
height 规定图片的宽度

文本属性

b和strong 加粗文本

<strong>加粗文本</strong>
<b>加粗文本内容</b>

i 斜体

<i>斜体</i>

u 下划线

<u>下划线</u>

sup 上标

<sup>上标</sup>

sub 下标

<sub>下标</sub>

del 删除线

<sub>删除线</sub>

font 规定字体属性

<font size="3" color="red">这是一些文本!</font>
<font size="2" color="blue">这是一些文本!</font>
<font face="verdana" color="green">这是一些文本!</font>

size：字体大小
color：字体颜色

pre 用来定义预格式化的文本。

<pre>
    此例演示如何使用 pre 标签
    对空行和 空格
    进行控制
    </pre>

常见应用就是用来表示计算机的源代码。

form 表单

<form action="/" method="post">
    <!-- 文本输入框 -->
    <!-- label标签的for和input的id值一样，鼠标点击用户名也代表默认选择文本框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <!-- checked 是默认单选该项 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>
	<input type="checkbox" id="test" name="subscribe">
	<label for="test">test</label>
    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

form 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
label 元素用于为表单元素添加标签，提高可访问性。
input 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。- - type 属性定义了输入框的类型，id 属性用于关联 label 元素，name 属性用于标识表单字段。
select 元素用于创建下拉列表，而 option 元素用于定义下拉列表中的选项。

锚文本

<a id="top">底部链接可以直接跳到这儿</a>
<a herf="#top">回到顶部</a>

form 表单

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

border 边框
width 宽度
height 高度
colspan 行
rowspan 竖
tr 行
th 标签定义 HTML 表格中的表头单元格。HTML 表格有两种单元格类型：
- 表头单元格 - 包含头部信息（由元素创建）
- 标准单元格 - 包含数据（由元素创建）
th 元素中的文本通常呈现为粗体并且居中。
表格
cellpadding 单元边与内容的空白
cellspacing 单元格的空白