HTML标签

HTML

块元素

无论内容多少,该元素独占一行
(p h1-h6...)

行内元素

内容撑开宽度左右都是行内元素的可以排在一行
(a strong em...)

标题标签

h1-h6 h1最大 ,h6最小

段落标签

<p></p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

粗体:<strong></strong>
斜体:<em></em>

特殊符号

空格:&nbsp;
大于号:&gt;
小于号: &lt;
版权符号: &copy;

图片标签

<img src="" alt="" title=""></img>
<img src="" alt=""/> 
src:图片路径
alt:图片加载失败时显示的文字
title:鼠标悬停文字

链接标签

<a href="" target="" >点击我跳转</a>
href:跳转的URL
target:
	_blank:新页面打开
	_self:在原页面跳转

锚链接
	1.需要一个锚点标记
	2.跳转到标记
<a name="top"></a>	:标记
<a href="#top">回到顶部</a>

功能性链接
	邮件链接: mailto:
<a href="mailto:xxxxxxx@163.com">点击联系我</a>	

列表标签

有序列表

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

无序列表

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

自定义列表

<dl>  
	<dt></dt>
	<dd></dd>
</dl>
dt:列表名称
dd:列表内容

表格标签

<table border="1px">
	<tr>
		<td colspan="2">1-1</td>
	</tr>
	<tr>
		<td>2-1</td>
		<td>2-2</td>
	</tr>
</table>
行: tr
列: td 
边框: border
跨列: colspan
跨行: rowspan

媒体元素标签

视频

<video src="" controls autoplat></video>
控制条: controls
自动播放: autoplat

音频

<audeo src="" controls autoplat></audeo>
控制条: controls
自动播放: autoplat

常用元素

header:标题头部区域的内容
footer:标题脚部区域的内容
section:Web页面中的一块独立区域
article:独立的文章内容
aside:相关内容或应用(常用于侧边栏)
nav:导航类辅助内容

iframe内联框架

<iframe src=""></iframe>
src:引用页面地址
w-h:宽度高度
在网站中嵌入另一个网站

表单标签

<form action="" method="">
	<input type="text" placeholder="提示信息"/>
	<input type="password"/>
	<input type="submit"/>
</form>
action:表单提交的位置,可以是网页,也可以是请求处理地址
method:提交方式
type="text":文本输入框
type="password":密码输入框
type="radio":单选框
type="checkbox":多选框
type="submit":提交
type="reset":重置
type="image":图片按钮
type="file":文件提交
placeholder:提示信息
required:非空判断
pattern:正则表达式判断
checket:默认选中
disabled:禁用
readonly:只读
hidden:隐藏


下拉框

<select name="列表名称">
	<option value="选项的值" selected>选项名</option>
	<option value="选项的值">选项名</option>
	<option value="选项的值">选项名</option>
</select>
selected:默认选项

文本域

<textarea name="" cols="" rows=""></textarea>
cols:行
rows:列

滑块

<input type="range" name="" min="0" max="100" step=""/>
min:最小值
max:最大值

搜索框

<input type="search" name=""/>

label

<label for="mark">点我</label>
<input type="text" id="mark">
增强鼠标可用性,点击文字可以选中输入框 
posted @ 2021-09-02 19:15  佛系的小白  阅读(29)  评论(0)    收藏  举报