html基础标签

蓝朽

已于 2023-05-02 12:24:59 修改

阅读量92

点赞数

分类专栏：前端相关文章标签： html 前端 css

于 2023-03-29 21:01:21 首次发布

本文链接：https://blog.csdn.net/lx00000025/article/details/129845031

版权

前端相关专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、html基本格式

<!DOCTYPE html>
<html lang="en">
<head><!-- 头部-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body><!-- 主体-->
    
</body>
</html>

二、html标题

HTML 标题是通过 <h1> - <h6> 标签来定义的.
这里有六个标题元素标签 —— <h1>、<h2> 、<h3>、<h4>、<h5>、<h6>，每个元素代表文档中不同级别的内容,它们的字体大小依次递减。
如下实例：

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

在这里插入图片描述

三、html段落

HTML 段落是通过标签<p>来定义的。
如下实例：

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

在这里插入图片描述

四、html链接

HTML 元素可以设置属性
属性是以名称/值对的形式出现，比如：name=“value”。
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="https://www.baidu.com">使用了 href 属性</a>

属性	说明
target	定义被链接的文档在何处显示
href	定义链接的地址

五、html格式化

HTML 使用标签 <b> 与 <i>对输出的文本进行格式，如：粗体 or 斜体
这些 HTML 标签被称为格式化标签.，以下是常用的一些：

标签	描述
`<b>`	定义粗体文本
`<i>`	定义斜体字
`<sub>`	定义下标字
`<sup>`	定义上标字
`<strong>`	定义加重语气
`<blockquote>`	定义长的引用
`<strong>`	定义加重语气
`<code>`	定义计算机代码
`<em>`	定义着重文字

六、注释标签

html注释

<!-- 注释-->

css注释

/*
注释
*/

七、head元素

标签	说明
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的js脚本文件
`<style>`	定义了HTML文档的样式文件

八、css导入方式

方式一：内联样式

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

方式二：内部样式表

<head>
<style type="text/css">
p {color:blue;}
</style>
</head>

方式三：外部样式表

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

方式四：导入样式表

<style type="text/css">
@import url("test.css");
</style>

九、图像

属性	说明
src	图像的 URL 地址。
alt	图片无法显示时，显示alt的内容
align	图片的对齐方式

示例：

<img src="./test.jpg" alt="test is close">

十、表格

表格的基本标签：

标签	作用
`<table>`	定义表格
`<th>`	定义表格的标题行
`<tr>`	定义表格的行
`<td>`	定义表格的列
`<caption>`	定义表格的标题，要定义在table标签里面

表格属性：

属性	作用
cellspacing	定义表格单元格之间的空间
cellpadding	表示单元格边框与单元格内容之间的距离
colspan	合并多列
rowspan	合并多行

十一、列表

1.无序列表ul

<ul>
	<li>咖啡</li>
	<li>茶</li>
	<li>牛奶</li>
</ul>

2.有序列表ol

属性	值
reversed	reversed:指定列表倒序(9,8,7…)
start	number 规定列表中的起始点。
type	1，A，a,I,i

3.定义列表

标签	作用
`<dl>`	定义列表
`<dt>`	自定义列表项目
`<dd>`	定义自定义列表的描述

十二、区块

1.区块元素：通常会以新行来开始

<h1>, <p>, <ul>, <table>

2.行内元素：行内元素在显示时通常不会以新行开始。

<b>, <td>, <a>, <img>,<span>

十三、表单

1.form标签

属性	值
action	URL，指定发送表单数据的位置
autocomplete	on，off :规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded，multipart/form-data，text/plain，如何进行编码
method	get（默认）,post ,提交方式
name	text ，表单名称
novalidate	novalidate,如果使用该属性，则提交表单时不进行验证。
target	_blank,_self,_parent,_top，在何处打开url

2.input标签

type的值：
button 普通按钮，checkbox 复选框，color 颜色选择，date 日期，datetime 日期时间
email 邮件，file 文件，hidden 隐藏，image 图像，month 月，number 数字框，password 密码框radio 单选框，range 范围框，reset 重置按钮，search 搜索，submit 提交，tel 电话框，text 文本框time 时间框，url url地址框，week 星期框，datetime-local 本地时间

value的值：指定元素 value 的值。

required的值 required 属性规定必需在提交表单之前填写输入字段。

readonly的值 readonly 属性规定输入字段是只读的。

pattern的值 regexp 规定用于验证 <input> 元素的值的正则表达式。

3.textarea文本域

属性	值
cols	number
rows	number
wrap	hard，soft

4.fieldset标签
定义了一组相关的表单元素，并使用外框包含起来

<form>
 <fieldset>
  <legend>个人信息:</legend>
  姓名: <input type="text"><br>
  邮箱: <input type="text"><br>
  生日: <input type="text">
 </fieldset>
</form>

5.select标签

属性	作用
size	规定下拉列表中可见选项的数目。
name	定义下拉列表的名称。
disabled	当该属性为 true 时，会禁用下拉列表。

6.datalist标签
<datalist> 标签需要与 <input> 标签配合使用，用来表示可选的列表。

<input list="test">
<datalist id="test">
  <option value="1">
  <option value="2">
  <option value="3">
  <option value="4">
  <option value="5">
</datalist>

7.<output> 标签显示计算或用户操作的结果.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

十四、框架

<iframe>标签规定一个内联框架。　
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
示例：

<iframe src="iframe.html" name="a"></iframe>
<p><a href="http://www.baidu.com" target="a">百度</a></p>

蓝朽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html基础标签

html基础一
复制链接

扫一扫

专栏目录