Let’s start with the basics!
<p>content<p>
p:tag
content:中间包裹的文本内容
<!DOCTYPE html> //解释文档的类型
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 注释内容-->
<h1>title</h1> //h1-h6标题 从大到小
<p>paragraph1</p>
<p>paragraph2</p>
</body>
</html>
head:包含不在网页中渲染的部分
body:网页渲染的部分
块级元素与内联元素(Inline and Block Level Element)
块级元素:
1.在页面以块的形式展现
2.出现在新的一行
3.占全部宽度
<div>
<h1>-<h6>
<p>
内联元素:
1.通常在块级元素内
2.不会导致文本换行
3.只占必要的部分宽度
<a> //超链接
<a href=url target="_blank">xxx</a> //新建一个网页,跳转到url
<img>
<em> //斜体
<strong> //加粗
列表:
无序列表:
<ul>
<li> list item 1 </li>
</ul>
有序列表:
<ol>
<li>xx<li>
</ol>
表格:
<table>
<thead>
<tr> //table row 行的形式
<th>姓</th> //可以看到表头加粗了
<th>名</th>
<th>年龄</th>
<th>Team</th>
</tr>
</thead>
<tbody>
<tr>
<td>周</td>
<td>泽楷</td>
<td>16</td>
<td>Samsara</td>
</tr>
</tbody>
</table>
表单:
<form action="form.js" method="POST">
<div>
<label>first name</label>
<input type="text" name="firstname" placeholder="Enter First Nmae">
</div>
<input type="submit" name="submit" value="Submit">
</form>
name用于提交表单数据,提交表单需要按钮;
<br> //换行
<hr> //加水平线
注释:
<p><abbr title="这是一段注释">周</abbr>泽楷</p>
引言:
<p><cite>周泽楷</cite>by me</p>
11.12更新
标签:
label-显示文本
input-输入框
<tr>
<td><label for="">姓名</label></td>
<td><input type="text"></td>
</tr>
11.16更新
表格:
thead-表格头部
tbody-表格主体
tr-行 标签
td-单元格 标签
cellspacing-表格边框内部距离
cellpadding-单元格内部的距离
目标单元格(合并代码):
1.先确定是跨行还是跨列合并
2.找到目标单元格。写上合并方式=合并的单元格数量
3.删除多余的单元格
rowspan-跨行合并
colspan-跨列合并
<table align="center" border="1" width=600 height=300 cellspacing=0>
<tr>
<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="center" border="1" width=600 height=300 cellspacing=0>
<tr>
<td></td>
<!-- 1.第一行第二列第三列合并 -->
<td colspan="2"></td>
<!-- 2.删除第一行第三列的单元格,因为向右合并把它挤出去了,它是多余的-->
<!-- <td></td> -->
</tr>
<tr>
<!-- 1.第一列第二行向下合并 -->
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- 2.删掉第三行第一个,因为向下合并把它挤到右边去了-->
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</table>
结果:
无序列表:
<ul>
里面只能嵌套<li>
有序列表:
<ol>
里面只能嵌套<li>
自定义列表:
dl-框
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
表单:
action-表单提交到哪里
method-GET/POST
name-区分表单
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
表单控件(表单元素):
1.input-输入表单元素 用于收集用户信息
2.select-下拉表单元素
3.textarea-文本域元素
<label>
标签:关联标签,例如,点它(图片、文字等)就可以选择上,增加用户体验。
input:
<form action="reg.jsp" method="POST" name="reg" align=center>
<!-- text默认宽度为20个字符 -->
姓名:<input type="text" value="请输入你的姓名"><br><br>
密码:<input type="password"><br><br>
<!-- radio标签起相同的名字,表示这是同一组,就是多选一;如果不加限制,就都可以选择 -->
<!-- checked表示默认显示选择哪一个 -->
性别:<input type="radio" name="sex" value="男" id="nan"> <label for="nan"><img src="" alt="">男</label>
<input type="radio" name="sex" checked="checked" value="女" id="nv"> <label for="nv"><img src="" alt="">女</label>
<br><br>
爱好:<input type="checkbox" value="游泳">游泳
<input type="checkbox" value="登山">登山
<input type="checkbox" value="旅游">旅游
<input type="checkbox" value="阅读">阅读
<br><br>
籍贯:
<select name="" id="">
<option value="">浙江</option>
<option value="">上海</option>
<option value="">江苏</option>
<option value="">黑龙江</option>
<option value="">北京</option>
</select>
<br><br>
我的简介:
<!-- 每行最多输入50个字符 -->
<textarea name="" id="" cols="50" rows="10">
请介绍您的经历等
</textarea>
<br><br>
<input type="submit" value="免费注册">
<br><br>
</form>