HTML+CSS3（三）——HTML基本标签

最新推荐文章于 2022-08-09 00:30:48 发布

C-A-L-D

最新推荐文章于 2022-08-09 00:30:48 发布

阅读量840

点赞数 3

分类专栏： Web前端-html+css3 文章标签： html html基本标签

本文链接：https://blog.csdn.net/qq_42952262/article/details/97241289

版权

Web前端-html+css3 专栏收录该内容

17 篇文章 3 订阅

订阅专栏

HTML+CSS3（一）——认识浏览器

HTML+CSS3（二）——HTML 初识

HTML+CSS3（三）——HTML基本标签

HTML+CSS3（四）——表单pattern正则属性

HTML+CSS3（五）——CSS基础

HTML+CSS3（六）——行内元素和块级元素

HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇）

HTML+CSS3（八）——CSS权重

HTML+CSS3（九）——CSS高级技巧

HTML+CSS3（十）——CSS3新特性之过渡

HTML+CSS3（十）——CSS3新特性之2D变形和3D变形

HTML+CSS3（十）——CSS3新特性之动画

HTML+CSS3（十一）——案例

HTML+CSS3（十二）——CSS常见问题

一.<body>标签属性：

<body background="../images/touxiang12.jpg" bgproperties=fixed link="blue" alink="blue" vlink="#f0f8ff" topmargin="50">
    ........
</body>

主要属性：
bgcolor=""    背景色
text=""    文本颜色
link=""    超链接初始颜色
alink=""    超链接点击时的颜色
vlink=""    超链接点击后的颜色
background=""    背景图
bgproperties="fixed"    背景图不动（默认是动的）
margin    页面与周围的间隔

二.注释：

三.换行<br/>和空格 

四.段落标签<p>和无语义标签<span>，<div>：

<p align="center">12312414</p>

<span>12334445</span>         <!-- 行内元素 -->
<div align="center">asgfdgeadfadfgdfgrdfg</div>    <!-- 块级元素 -->

五.水平线：

<hr align="center" width="100%" size="5" color="#008000"/>

六.超链接标签<a>:

超链接：
<a href="../test.html" target="_blank">_blank新打开</a>
<a href="../test.html" target="_self">_self默认本窗口</a>
（注意：target属性打开链接方式有五种参数：_blank,_self(默认),_top,_parent,_search
了解参考：https://blog.csdn.net/qq_27918787/article/details/52744173）


书签：
<a name="aaa">记号</a>
<a href="#aaa">链接到记号</a>
（切记连接到记号的#不要忘了！）

如果链接资源不是html（跳转页面），图片（打开图片），那么其他文件为下载链接：
<a href="../images/实验八.docx">下载？</a>

邮箱链接：（默认电脑上系统自带的邮箱）
<a href="mailto:2444444525@qq.com">邮箱联系我！</a>

七.图像<img>：

<img>为行内元素
<img src="../images/touxiang12.jpg" width="500" height="502"/>


主要属性：
src=""    资源路径
alt=""    图片未加载出来时显示的文字
title=""    图片描述信息
hspace=""    水平方向上左右空白
vspace=""    垂直方向上上下空白
border=""    图片边框厚度
width=""    图片宽度（强制拉伸，不写默认根据高度调整宽度）
height=""    图片高度（强制拉伸，不写默认根据宽度调整高度）
align=""    图片上文字对齐方式


图片超链接：
<a href="../test.html"> <img src="../images/touxiang12.jpg" width="500" height="502"/></a>

八.表格：

<table>为块级元素
<table align="center" border="1" width="500" height="600" cellpadding="20" cellspacing="20" background="../images/touxiang12.jpg" bordercolor="red">
    <caption align="top" valign="top">表名</caption>
    <tr>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
        <th>表头</th>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">表项</td>
        <td>表项</td>
        <td>表项</td>
        <td>表项</td>
    </tr>
    <tr>
        <td>表项</td>
        <td>表项</td>
        <td>表项</td>
    </tr>
    <tr>
        <td>表项</td>
        <td>表项</td>
        <td>表项</td>
    </tr>
</table>


主要属性：
<table>标签：
align=""    对齐方式
border=""    表格框
width=""    表格宽度
height=""    表格高度
cellspacing=""    表项空白间距
cellpadding=""    表项内部空白间距
rules="none"    表格无内线

<caption>标签：
align=""    表名对齐方式
valign=""    表名垂直方向对齐方式

<tr><th><td>标签公有属性：
align=""    表项对齐方式
valign=""    表项垂直对齐方式

<table><tr><th><td>公有属性：
bgcolor=""    背景色
background=""    背景图
bordercolor=""    边框颜色

<th><td>标签公有属性：
rowspan=""    占行数
colspan=""    占列数

九.无序列表和有序列表，自定义列表：

<ul><ol><li>都是块级元素
<ul>
    <li>123</li>
    <li type="disc">123</li>
    <li type="circle">123</li>
    <li type="square">123</li>
</ul>

<ol>
    <li>456</li>
    <li type="1">456</li>
    <li type="A">456</li>
    <li type="a">456</li>
    <li type="I">456</li>
    <li type="i">456</li>
</ol>


样式type在<ul><ol><li>标签都可写

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
</dl>

十.音频标签：

        <audio src="C:\\Users\\Administrator\\Desktop/681ef6f50f20971ac5bddb07161fc6b5.mp3" controls autoplay loop preload>
		您的浏览器不支持该音频标签
	</audio>

	<video src="C:\\Users\\Administrator\\Desktop/mda-ih2wjc53wfpeztut.mp4" controls width="300">
		您的浏览器不支持该音频标签
	</video>

audio和video标签公用参数：
controls     加载控件
autoplay     自动播放
loop     循环播放
preload    自动加载资源
src    资源路径

video特有：
width
height

十一.表单：

    <!-- 在表单结构外，通过form-id绑定-->
    文本框：<input type="text" form="fff" name="1" pattern="/d{4}-/d{2}" required />
	<br>
    <form action="#" method="#" id="fff">
		密码框：<input type="password" name="2">
		<br>
		邮  箱：<input type="email" name="3">
		<br>
		提交url地址：<input type="url" name="4" value="www.baidu.com/" disabled>
		<br>
		数值输入框：<input type="number" name="5" value="12332">
		<br>
		范围滑动条：<input type="range" name="6" disabled>
		<br>
		<!-- 下面展示两种绑定写法： -->
		单  选：<label><input type="radio" name="7" value="男">男</label>
				<input type="radio" name="7" value="女" id="rrr"><label for="rrr">女</label>
		<br>
		复选框：<input type="checkbox" name="8" value="篮球">篮球
				<input type="checkbox" name="8" value="足球">足球
				<input type="checkbox" name="8" value="乒乓球">乒乓球
		<br>
		选择栏：
		<select size="1" name="9" multiple width="200"><!--去掉multiple size="3"实现下拉框-->
			<option value="湖北">湖北</option>
			<option value="湖南" selected>湖南</option>
			<option value="四川">四川</option>
			<option value="江西">江西</option>
			<option value="福建">福建</option>
			<option value="山东">山东</option>
		</select>
		<br>
		日期选择器：<input type="date" name="10">
		时间：<input type="time" name="11">
		<br>
		多行文本域：
		<textarea name="12" rows="20" cols="100">
			文本内容...
		</textarea>
		<br>
		文件上传：<input type="file" name="13">
		<br>
		隐藏域：<input type="hidden" name="14" value="隐藏域的值">

		<input type="button" name="" value="按钮" width="200">
		<input type="reset" name="" value="重置">
		<!-- <input type="submit" value="提交"> -->
		<!-- 使用图片image代替submit提交按钮 -->
		<input type="image" src="C:\\Users\\Administrator\\Desktop/2WUF3O0~0J26EL2I~B)49IH.png" name="" width="100" height="20">
	</form>

主要参数：
size:可见字符数
maxlength:允许输入的最大长度
step:步长
required:必须输入值，不为null
pattern:输入的正则表达式格式（提交时正则匹配）
checked:默认选中
max:设置最大值
min:设置最小值
readonly:设置只读（内容变暗）
placeholder:提示信息
autocomplete:自动补全
autofocus:自动获取焦点
disabled:禁用该标签元素（只读而且不能提交）

十二.特殊字符标签（理解）

C-A-L-D

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS3（三）——HTML基本标签

目录：HTML+CSS3（一）——认识浏览器HTML+CSS3（二）——HTML 初识HTML+CSS3（三）——HTML基本标签HTML+CSS3（四）——表单pattern正则属性HTML+CSS3（五）——CSS基础HTML+CSS3（六）——行内元素和块级元素HTML+CSS3（七）——display属性（前面文章已讲过，这里转载一篇）HTML+CSS3（八...
复制链接

扫一扫