html基础

最新推荐文章于 2024-08-31 15:09:14 发布

Alice763333

最新推荐文章于 2024-08-31 15:09:14 发布

阅读量695

点赞数 11

文章标签： html 前端

本文链接：https://blog.csdn.net/alice763333/article/details/139224286

版权

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 标签设置的编码和网页文件在保存时所使用的文档编码不相同造成的！

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="飞思科技——1班" />

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

文本属性

b和strong 加粗文本

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

font 规定字体属性

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

锚文本

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

form 表单

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

<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>