目录:
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
- 注释
- 换行和空格
- 段落p和无语义span,div
- 水平线
- 超链接
- 图片
- 表格
- 列表
- 音频
- 表单
-
特殊字符标签
一.<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:禁用该标签元素(只读而且不能提交)