1.块标签或者称为块元素
特点:默认独占一行
div ul li 无序列表 ol li 有序列表 dl dt dd 自定义列表 p 段落标签
h1 标题标签,h1通常在网页中只出现一次,通常在网站logo部 hr 水平线
定义表格的盒子 table
tr 定义行 th 定义表头 td 定义列
bordercolor="red" 定义表格的边框颜色
cellspacing="0" 指的是单元格和单元格之间的距离
cellpadding="20" 指的是内容和边框之间的距离
rowspan="2" 合并2行 colspan="2" 合并2列
<!--行内标签或者称为内敛标签
特点:默认在一行显示
行内标签 span 无意义 i 斜体 em 斜体 strong 加粗 b 加粗 sup 上标 sub 下标 del 删除线
mark 标记 big 大的 small 小的 br 换行 a 超链接 img 图片标签 ins 插入标签 u 下划线
input输入框 select 下拉选择框
a 超链接标签 target="_blank" 新窗口打开 target="_self" 在本窗口打开
label 使用label标签的for属性关联input type="radio"中的id,可以在label中添加文字点击文字选中
<input type="radio" name="sex" id="nan" />
<label for="nan">男</label>
链接:
<a href="https://www.baidu.com" target="_blank">百度</a>
<img src="images/1.jpg" title="鼠标移动到图片上边,提示文字"/>
<img src="images/2.jpg" alt="图片加载失败,用文字来代替图片显示" title="hello"/>
2.表单 表单提交方式:post get
<form action="">
去掉文本原来轮廓线 outline:none
文本框:<input type="text" name="username" placeholder="请输入用户名" /> <!--单行文本输入框-->
<input type="password" placeholder="请输入密码" /> <!--密码框-->
复选框:<input type="checkbox" id="music" checked="checked"/> <!--复选框-->默认选中checked="checked"
<label for="music">音乐</label>
单选框 :<input type="radio" id="sex" checked="checked"/> 单选框 默认选中checked="checked"
<label for="sex">男</label>
扩大点击区域: label 使用label标签的for属性关联input type="radio"中的id,可以在label中添加文字点击文字选中
<input type="radio" name="sex" id="nan" />
<label for="nan">男</label>
下拉选择框: <select name="">
<option value="">洛阳</option>
<option value="">郑州</option>
<option value="" selected="selected">商丘</option> <!--selected="selected" 默认选中-->
</select>
按钮: <input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />
</form>
多行文本输入框 : textarea 定义多行文本输入框 rows 定义可见行 cols 定义可见列
<textarea name="" rows="10" cols="100"></textarea>
3、css
内部引入
<style type="text/css">
</style>
外部引入
<link rel="stylesheet" type="text/css" href="css/style.css"/>
行内引入
<div style="color: red;">我是行内引入样式修饰的</div>
4、盒子设置
background: pink; 背景色设置 border: solid 10px black;/ 设置边框 solid实线 10像素宽 颜色为black黑色*/
solid实线 dashed虚线 dotted点线 double双实线
border-radius: 50%; 设置边框的弧度 50%指的是半径*/ 内填充:padding: 30px; 外填充:margin: 20px; line-height: 20px; 行高设置*/
5、文本设置
文本: vertical-align: middle;垂直居中对齐*/ white-space: nowrap;设置文本不换行*/ 文本缩进:text-indent: 4em;
文本颜色:color 文本大小:font-size: 20px; 加粗:font-weight: bold; text-decoration: none;去下划线 text-align: right;文本方向向右
6、 阴影:text-shadow: 1px 1px 1px red, 盒子是box-shadow:
7、背景图片: background-repeat: no-repeat 不重复 背景图片位置设置:background-position: center center; 水平和垂直方向居中显示
background-size:第一个值是水平方向 第二个值是垂直方向;
margin: 0px auto;水平居中
overflow: hidden;垂直居中
clear: both;设置一堵墙,防止下面浮动上去
鼠标经过显示颜色.box:hover{
background-color: #f00;
}
背景图片缩写:background: url(images/addr.png) no-repeat left center;
线上实训前端代码笔记第一周
最新推荐文章于 2024-10-20 18:03:05 发布