1、<input type="text">文本框
2、<input type="password">密码框
3、<input type="radio" name="1">XXX<inputtype="radio" name="1">XXX单选框(checked="checked"默认选择)
4、<input type="checkbox">xxx<inputtype="checkbox">xxx<inputtype="checkbox">xxx<inputtype="checkbox">xxx<inputtype="checkbox">xxx多选框( checked="checked"默认选择)
5、<select>
<option>xxx</option>
<option>xxx</option>
<option>xxx</option>
<option>xxx</option>
<option>xxx</option>
<??lect>下拉列表( selected="selected"默认选择)
6、<textarea rows="2" cols="30"></textarea>文本域
7、<input type="submit" value="提 交"><inputtype="reset" value="重置">提交和重置按钮
8、 空格
9、<input type="number">?用于应该包含数字值的输入字段<input type="number" name="quantity" min="1" max="5">
10、<input type="date">?用于应该包含日期的输入字段<input type="date" name="bday">Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
11、<input type="color">?用于应该包含颜色的输入字段Select your favorite color:
<input type="color" name="favcolor">
12、<input type="range">?用于应该包含一定范围内的值的输入字段<input type="range" name="points" min="0" max="10">
13、<input type="month">?允许用户选择月份和年份 Birthday (month and year):
<input type="month" name="bdaymonth">
14、<input type="week">?允许用户选择周和年
Select a week:<input type="week" name="week_year">
15、<input type="time">?允许用户选择时间(无时区)
Select a time: <input type="time" name="usr_time">
16、<input type="datetime">?允许用户选择日期和时间(有时区)
Birthday (date and time): <input type="datetime" name="bdaytime">
17、<input type="datetime-local">?允许用户选择日期和时间(无时区)
Birthday (date and time): <input type="datetime-local" name="bdaytime">
18、<input type="email">?用于应该包含电子邮件地址的输入字段E-mail: <input type="email" name="email">
19、<input type="search">?用于搜索字段(搜索字段的表现类似常规文本字段)
Search Google: <input type="search" name="googlesearch">
20、<input type="tel">?用于应该包含电话号码的输入字段,目前只有 Safari 8 支持 tel 类型。Telephone: <input type="tel" name="usrtel">
21、<input type="url">?用于应该包含 URL 地址的输入字段。
根据浏览器支持,在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型,并向键盘添加 ".com" 以匹配 url 输入。
Add your homepage: <input type="url" name="homepage">
22.text-transform: capitalize;每个字母开头都大写
选择器 六类
1、标签选择器p{color:red;font-size:20px}div{color:red;font-size:20px}
2、类别选择器.one{color:red;font-size:20px}.two{color:red;font-size:20px} <p class="one">
3、ID选择器#one{color:red;font-size:20px}#two{color:red;font-size:20px} <p id="one">
4、嵌套声明p span{color:red;font-size:20px} <p><span>19软件08班</span>的期中成绩是最棒的!</p>
5、集体声明h1,p,h3,body{text-align:center;color:blue}
6、全局声明*{text-align:center;color:blue}
样式 三类
行内样式<p style="text-align:center;color:blue">
内嵌样式<head><style>p span{color:red;font-size:20px}</style></head>
外联样式<head><link rel="stylesheet" href="1.css"></head>
css背景样式
body{background-color:red}/{background-image:url("1.jpg");background-repeat:no-repeat/repeat-x/repeat-y}/{background:red rul("1.jpg") repeat-x}
超链接样式
a{color:red;text-decoration:none;}默认状态
a:link{color:blue;}未被访问状态
a:visited{color:green}用户已访问
a:hover{color:pink}鼠标位于链接上方
a:active{color:black}链接被点击时的状态
font
{color/font-size/font-family/font-style/font-wight/}
盒子
hidden 超出部分不可见
scroll 显示滚动条
auto 如果有超出部分,显示滚动条
border属性
border-width: px、 thin、medium、thick
border-style: dashed、dotted、solid、double
border-color: 颜色
border:
width style color
/*border-top-color: pink;
border-bottom-color: aqua;
border-right-color: coral;
border-left-color: gold;*/
/* border-color: red green;
左右颜色green上下red
*/
/* border-color: red green yellow;
上红左右绿下黄*/
/*border-color: red green yellow black;
上左下右*/
padding:20px(四个方法的内边距都为20px)
padding-top:20px(当个盒子的上内边距为20px)
padding:20px 10px 5px 30px(上为20,右为10,下为5,左为30)
padding:20px 10px 5px(上为20,右为10,下为5,左为10)
padding:20px 10px(上为20,右为10,下为20,左为10)
margin同上
margin的合并:垂直方向合并,水平方向不合并
图片、文字水平居中
text-align:center;
div水平居中
margin:0 auto;
浏览器自动计算
margin属性
垂直外边距合并
水平居中auto
盒子定位与转换
从上到下,从左到右,输出文档内容
block从上到下独占一行
<div> 、<p>、<h1>、<ul>、 <ol>、 <li>、 <table>、<form>
inline 从左到右占据一行
<a>、<span>
inline-block <img>
常见的inline-block元素 <img>
常见的inline元素 <span>、<a>
常见的block元素
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<table>、<form>
clear
both,清除左右两边的浮动。
left 和 right 只能清除一个方向的浮动。
none 是默认值,只在需要移除已指定的清除值时用到。
一、position
1、固定定位fixed
2、相对定位relative
3、绝对定位absolute
二、位置
1、top 2、right 3、bottom 4、left
三、叠放次序
z-index(取值大的在上面,取值小的在下面)
text-shadow属性
圆角边框
border-radius圆角边框(border-top-left-radius 左上角的形状
bord-bottom-left-radius 左下角的形状
border-bottom-right-radius 右下角的形状
box-shadow阴影
text-shadow属性
描边h1{
color:white;
text-shadow:2px 2px 4px #000;
h1{
color:white;
text-shadow:2px 2px 4px #000;}浮雕
word-wrap属性
normal
break-word
允许长单词、URL强制进行换行
字体文件后缀 适用于浏览器
.TTF或.OTF Firefox 、 Safari 、 Opera
.EOT Internet Explorer 4.0+
.SVG Chrome 、 IPhone
.WOFF Chrome 、 Firefox
一、过渡 transition属性
transition-property(属性名|all 对哪个属性进行变化)
transition-duration(持续时间)
transition-timing-funct
笔记HTML
最新推荐文章于 2024-08-31 20:49:28 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)