- 标签的语义化
优先选用有语义标签
<div></div>
<p></p>
- table：快速创建表格：
table>tr*n>td*n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<!-- 表格 -->
<table width="700" height="400" border="1" cellspacing="2" cellpadding="10" bgcolor="grey" align="right">
<!-- 默认border为0 -->
<!-- cellspacing控制单元格与单元格距离默认值是2 -->
<!--cellpadding 内容距离边框的距离 -->
<!-- align可以用在table水平对齐，用在tr/td可内容对齐 -->
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>职业</td>
</tr>
<tr>
<td>王飞</td>
<td>男</td>
<td>100</td>
<td>前端开发</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>10</td>
<td>学生</td>
</tr>
</table>
</body>
</html>
<tr>中间只能嵌套`<td></td>和<th></th>
<td>可容纳所有元素，像一个容器
- 表格头部/主体/底部
<tablle>
<tbody>表格主体</tbody>
<thead>表格头部</thead>
<tfoot>表格底部</tfoot>
</table>
一般<tfoot>不写,页脚一般有兼容性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表头</title>
</head>
<body>
<table width="600" height="400" border="1" align="center">
//表单标题
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>职业</th>
</tr>
<tr>
<th>张三</th>
<th>李四</th>
<th>王五</th>
</tr>
<tr>
<th>学生</th>
<th>医生</th>
<th>教师</th>
</tr>
</table>
</body>
</html>
-
删除单元格
2.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<table border="1"align="center" width="1000" height="900" cellspacing="0">
<tr>
<!-- 删除后需要注释掉不用的表格 -->
<td colspan="3" ></td>
<!-- <td ></td> -->
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
<tr>
<td ></td>
<td rowspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<!-- <td></td> -->
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<!-- <td></td> -->
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td ></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td ></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
</table>
</table>
</body>
</html>
-
练习
11.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table width="1000" height="900" border="1" align="center">
<caption><strong>123</strong></caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td><img src="images/down.jpg" height="11" width="13" alt=""></td>
<td>1</td>
<td>1</td>
<td><a href="#">a</a> <a href="#">a</a> <a href="#">a</a></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td><img src="images/down.jpg" height="11" width="13" alt=""></td>
<td>2</td>
<td>2</td>
<td><a href="#">a</a> <a href="#">a</a> <a href="#">a</a></td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td><img src="images/down.jpg" height="11" width="13" alt=""></td>
<td>3</td>
<td>3</td>
<td><a href="#">a</a> <a href="#">a</a> <a href="#">a</a></td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td><img src="images/down.jpg" height="11" width="13" alt=""></td>
<td>4</td>
<td>4</td>
<td><a href="#">a</a> <a href="#">a</a> <a href="#">a</a></td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td><img src="images/down.jpg" height="11" width="13" alt=""></td>
<td>5</td>
<td>5</td>
<td><a href="#">a</a> <a href="#">a</a> <a href="#">a</a></td>
</tr>
<tr>6
<td>6</td>
<td>6</td>
<td><img src="images/down.jpg" height="11" width="13" alt=""></td>
<td>6</td>
<td>6</td>
<td><a href="#">a</a> <a href="#">a</a> <a href="#">a</a></td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td><img src="images/down.jpg" height="11" width="13" alt=""></td>
<td>7</td>
<td>7</td>
<td><a href="#">a</a> <a href="#">a</a> <a href="#">a</a></td>
</tr>
</table>
</body>
</html>
- 表单:接收用户信息
- 常见表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- form将用户信息提交到服务器 -->
<!-- action:阶收表单信息，交给谁处理
method:提交方式
name：表单名称
name：数据库唯一识别名称，name值不要相同，可以自定义。
size:控制文本输入长度
type：类型
checked:设置默认选项
-->
<form action="1.php" method="post" name="reg" >
<!-- 文本输入框 -->
<!-- label for id 点击文字，获取文本框光标焦点 -->
<label for="us">昵称：</label><input type="text" name="username" id="us" value="默认值在文本框中" maxlength="6"<!-- size="50" --><br><br>
<!-- 密码输入框 -->
密码：<input type="text" name="password" value=""><br><br>
<!-- 单选输入框 将单选按钮的name值设置相同才可以设置单选-->
<!-- maxlength:最多可以输入多少字符数 -->
性别：<input type="radio" name="gender"checked="checked">
<input type="radio" name="gender">女<br><br>
<!-- 多选按钮 -->
爱好：<input type="checkbox">篮球<input type="checkbox" checked="checkbox">足球<input type="checkbox" checked="checkbox">羽毛球<input type="checkbox">乒乓球<br><br>
<!-- 上传文件 -->
<input type="file"><br><br>
<!-- 文本域 -->
个人简介：<textarea name="" id="" cols="30" rows="10"></textarea><br><br>
<!-- 下拉列表 -->
出生地：<select name="" id="">
<option value="">中国</option>
<option value="">美国</option>
<option value="">英国</option>
<option value="">俄罗斯</option>
<!-- selected设置默认选项 -->
<option value="" selected="selected">韩国</option>
<option value="">印度</option>
</select>
<br><br>
<!-- label标签使用方法见上面昵称-->
<!-- 按钮系列 <-->
<input type="submit" name=""value="注册">
<!-- 普通按钮不能提交，配合 -->
<input type="button" value="提交">
<!-- button按钮可提交 -->
<button>button按钮</button>
<!-- 图片按钮 可提交-->
<input type="image" src="images/btn.png">
<input type="reset" value="恢复出厂值" name="123">
</form>
</body>
</html>
- 综合作业
-
CSS
- css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- 内部样式表 -->
<style type ="text/css">
/*div在这里是选择器,选择标签来化妆*/
div{
width:300px;
height:100px;
background-color:gray;
font-size:20px;
color:red; /* color可设置字体颜色*/
}
p{
width:100px;
height:40px;
background-color:yellow;
font-size:30px;
}
h1{
width:200px;
height:200px;
background-color:red;
font-size:40px;
}
/*类选择器：多个标签可以多次调用同一类选择器*/
.box{
color:red;
font-size:100px;
}
.main{
background-color:blue;
}
</style>
}
}
</head>
<body>
<div>呵呵哒</div>
<div>么么哒</div>
<p>啦啦啦</p>
<h1>哈哈哈</h1>
<h2>html</h2>
<!-- table>tr*2>td*2 -->
<!-- 行内样式/内联样式 -->
<p style="
width:100px;
height:40px;
background-color:blue;
font-size:30px;">开心的</p>
<!-- 类选择器 -->
<!-- 一个标签可以调用多个类选择器 -->
<div class="box main" >aaaaaaaaa</div>
<div>bbbbbbbb</div>
<div>ccccccccc</div>
<h3>dddddddddddd</h3>
<h4>eeeeeeeeeeeee</h4>
<p>fffffffffff</p>
</body>
</html>
- style.css
h2{
width:300px;
height:100px;
background-color:gray;
font-size:20px;
-
标签选择器也叫元素选择器
复杂的可使用.nav-login来定义类选择器/
内嵌式和外链式谁后引入最后就用谁的样式 - 类选择器
-
命名规则
-思维导图
html第二天.jpg
网友评论