HTML标签

最新推荐文章于 2024-11-11 23:47:26 发布

Christina_cyw

最新推荐文章于 2024-11-11 23:47:26 发布

阅读量105

点赞数

分类专栏： # HTML+CSS

by Chris

本文链接：https://blog.youkuaiyun.com/Christina_cyw/article/details/112853759

版权

HTML+CSS 专栏收录该内容

3 篇文章

订阅专栏

一、

`<html>`:根标签

`<head>`

<head> 包含了所有的头部标签元素。
在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: 
<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

 1. <head>	定义了文档的信息
 2. <title>	定义了文档的标题
 3. <base>	定义了页面链接标签的默认链接地址
 4. <link>	定义了一个文档和外部资源之间的关系(引入外部样式表)
 5. <meta>	定义了HTML文档中的元数据(描述HTML文档的描述，关键词，作者，字符集等)
 6. <script>	定义了客户端的脚本文件
 7. <style>	定义了HTML文档的样式文件(定义内部样式表)

`<body>`

HTML新增语义标签

`<header>`

`<nav>`

`<article>`

`<section>`

`<aside>`

`<footer>`

二、写在`<body>`内的一些标签

`<h1>`~`<h6>`标题标签：独占一行，加粗字体，有行间距

`<p>`段落标签：独占一行，有行间距

`<br/>`：换行

`<hr/>`：横线

`<ul>/<ol>+<li>`：列表

`<img/>`：图片

src路径
alt图片裂开设置文字
title悬停文字

`<a>`：超链接

href=”路径“
target=_self 新替旧| _blank新开页面|_top在顶层打开|_parent父窗口|自定义窗口名称

`<dt>+<dt>+<dd>`：定义列表

`<marquee>`：滚动

direction=down|up|left|right
srcolldelay：延迟
behavior=alternate来回|srcoll一个方向|slide一次

`<table>+<tr>+<td>`：表格

colspan：跨列
rowspan：跨行
cellpadding、cellspacing：只能在table标签中设置，只能通过属性设置

建表快捷方式：table>tr* num>td* num+TAB

高级表格
<thead>：标题
<caption>：表格标题
<tbody>：主体
<tfoot>：脚注，不管源码在哪，都在最后显示

`<audio>`：音频

<audio>
	<source src= />
	//多个资源从上向下加载，若一个损坏自动切换到下一个
	</source>
</audio>

src
controls：控制面板
autoplay
preload
muted

`<video>`：视频

`<button>`：按钮

`<div>`：块级标记

`<span>`：行内元素标签

特殊符号

&nbsp：空格
&lt：<
&gt：>
&copy：版权

不常用

`<strong>`：加粗

`<font>`：字体

`<em>`：倾斜

三、表单标签`<form>`内的一些标签

<form>无外观，外层父标签，功能性标签
属性：

action：表单提交服务器地址
method：post |get //表单提交方式

post /get方式

get：

安全性低，一般用于查询
数据会被显示在地址栏
地址栏中只能写字符串类型，有长度限定
只能提交文本数据

post：

安全性高，一般用于更改
数据不显示在地址栏，通过请求体发送数据
提交数据格式和大小无限定

`<input/>`

属性

type=
text |password |
submit 默认“提交”按钮|reset 默认“重置”按钮 |botton 普通按钮|
radio 单选，相同name配合不同value |checkbox多选
date |time |datetime-local |week |month |number | email | tel |URL |search |color |
range 进度条|file accpt =接收类型，多类型用逗号隔开 |hiddden |image src=“ ”
placeholder：输入框提示文字
required：必填
list：配合datalist、input
<datalist id='dtl'> <option></option> </datalist> <input list=‘dtl’/>

`<fildset>+<legend>+表单名`

`<select name=''>+<optgroup>+<option value=''>`：下拉列表

`<textarea>`：文本域，所有内容原样输出

四、框架集

`<frameset>+<frame>`

<frameset rows="30%,*">
	<frame src= />
	<frameset cols="25%,*">
		<frame src= />
		<frame src= />
	</frameset>
</frameset>

style=overflow-x |overflow-y =“hidden”|scrolling =“no” //滚动条

HTML标签

一、

<html>:根标签

<head>

<body>

<header>

<nav>

<article>

<section>

<aside>

<footer>

二、写在<body>内的一些标签

<h1>~<h6>标题标签：独占一行，加粗字体，有行间距

<p>段落标签：独占一行，有行间距

<br/>：换行

<hr/>：横线

<ul>/<ol>+<li>：列表

<img/>：图片

<a>：超链接

<dt>+<dt>+<dd>：定义列表

<marquee>：滚动

<table>+<tr>+<td>：表格

<audio>：音频

<video>：视频

<button>：按钮

<div>：块级标记

<span>：行内元素标签

<strong>：加粗

<font>：字体

<em>：倾斜

三、表单标签<form>内的一些标签

<input/>

<fildset>+<legend>+表单名

<select name=''>+<optgroup>+<option value=''>：下拉列表

<textarea>：文本域，所有内容原样输出