HTML基本标签:
1.表单元素:接收用户在浏览器上输入数据,提交给后台处理页面
语法:
<form action="页面提交地址" method="提交方式">
一堆表单元素
</form>
action:后台程序的处理页面
method:get/post
表单元素:
属性: name 名称 value值
文本框:
属性:
size maxlength
<input type="text"> 文本框
<input type="password"> 密码框
---------------H5----------------
<input type="email"> 邮箱
<input type="url"> 网址
<input type="tel"> 电话
<input type="number" min="1" max="10" step="1">数字
<input type="range" min="1" max="10" step="1">范围
<input type="search"> 搜索框
<input type="color"> 颜色框
<input type="date"> 日期
<input type="month"> 月份
<input type="week"> 周
<input type="time"> 时间
按钮:
属性:
checked
单选按钮:
<input type="radio" value="值" name="一致">
复选框:
<input type="checkbox" value="值" >
提交按钮:
<input type="submit" value="文字"> 点击之后会自动触发提交事件
<input type="button" value="文字"> 普通按钮 配合js代码
<button>按钮</button>
下拉框:
属性:
selected
<select>
<option value="1">S1</option>
<option value="2">S2</option>
<option value="3">Y2</option>
</select>
文本域:
<textarea cols="" rows=""></textarea>
上传文件:
<input type="file">
隐藏域:
<input type="hidden">
H5属性:
placeholder 提示文字
autofocus 自动获得焦点
2.布局标签:
表格布局 DIV+CSS(弹性盒子/百分比) 语义化DIV
①表格标签
<table>
<tr></tr> 行
<th></th> 加粗列 <td></td>普通列
</table>
跨行 跨列
colspan rowspan
②无意义标签 div span
<div></div>
<span></span>
CSS样式设置:
层叠样式表: 美化元素 动画特效(CSS3) 布局
1.样式基本写法(属性):
样式名称:值;
样式名称:值;
样式名称:值;
color:red;
font-size:20px
2.四种样式引入方式:
①行内样式 直接把样式写在标签上
<p style="样式属性设置"></p>
代码完全没有可以复用性
选择器:选出页面元素
ID选择器 类选择器 标签选择器
a:id选择器
#id名称{
样式属性设置
}
b:类选择器
.类名称{
样式属性设置
}
c:标签选择器
标签名称{
样式属性设置
}
②内部样式:
在head中 写一个
<style>
选择器{
样式属性设置
}
</style>
页面代码太长 不具有多页面的通用性
③外部样式表:
单独创建一个css结尾的文件.css
把选择直接放进去
<link rel="stylesheet" href="css路径"/>
④导入样式表:
单独创建一个css结尾的文件.css
把选择直接放进去
<style>
@import url("css路径"); //在页面加载完成之后才加载css
</style>
注意:
①写注释!!!!!!!!
②命名规范 stu-name stu_name stuName
③样式会存在继承问题 样式 字体相关样式会子元素继承
④优先级
id选择器>类选择器>标签选择器
CSS/HTML/HTML5基本标签及属性——02
最新推荐文章于 2022-03-31 17:26:11 发布