html基础知识点：
1.web服务端其实只是运行socket服务端，而客户的浏览器充当socket客户端，服务端返回的数据永远只是字符串，如果字符串中的格式恰好是浏览器认识的，就会转化成各种颜色以及样式
2.DOCTYPE 标准的对应关系
3.html标签（只能有一个，相当于人的身体，是主体）
4.head标签（相当于脑袋，是内在的东西，支配所有动作，外在是看不到的）
5.自闭合标签meta
6.搜索引擎：
<meta name="keywords" content="汽车之家！">
<meta name="description" content="汽车之家为你服务！！！">7.指定IEX版本运行网站
<meta http-equiv="X-UA-Compatible" content="IE=IE9">8.body标签（构造内容的标签）
<a href="http://soccer.hupu.com">李杰</a>
跳转网页的链接9.p标签（段落，不会默认换行）
<p>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
注：标签存在的意思是更好定位，操作容易
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta http-equiv="Refresh" content="3 Url=http://soccer.hupu.com">-->
<meta http-equiv="X-UA-Compatible" content="IE=IE9">
<meta http-equiv="Refresh" content="3">
<meta name="keywords" content="汽车之家！">
<meta name="description" content="汽车之家为你服务！！！">
<title>老男孩</title>
</head>
<body>
<a href="http://www.oldboyedu.com">老男孩</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--  表示空格的意思 >是大于号的意思 -->
<!-- <br>标签是换行的意思，但是此时的换行后的内容依然是同一个段落（块级标签） -->
<!-- <p>标签段落和段落之间有间距 (块级标签) -->
<!-- <hx>标签是标题标签，依次从小到大（块级标签），加大加粗 -->
<a href="http://soccer.hupu.com">李 <a>杰</a>
<p>sssssssssssssssssssss<br>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>
<h6>alex</h6>
<h5>alex</h5>
<h4>alex</h4>
<h3>alex</h3>
<h2>alex</h2>
<h1>alex</h1>
<!-- span（白板，什么特性都没有）标签不会占用一行，只是内容区域占用，区别于以上的标签（行内标签） -->
<span>asfasf</span>
<span>asfasf</span>
<span>asfasf</span>
<span>asfasf</span>
<span>asfasf</span>
<span>asfasf</span>
<!-- <div>标签也是白板，没有任何特性，但是是块级标签-->
<!-- chrome审查元素的使用 -->
<div>1</div>
<div>2</div>
<div>3</div>
<!-- input标签，text明文，password密文-->
<!-- 如果想达到提交数据的效果必须用<form>表单标签抱着，类似于去银行办手续必须填表单才能提交系统-->
<form>
<input type="text"/>
<input type="password"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
<br />
<!--<form action="www.baixxx.com action是提交数据的意思，而且是通过字典的方式提交 ">-->
<!-- 同样是按钮，默认button什么用处都没有，以后会有用，此时submit才有按的作用-->
<!-- 如果标签没有name值，那么server端后台是抓不到对应的数据的-->
<form action="" method="post">
<input type="text" name="username"/>
<input type="password" name="password"/>
<input type="button" value="登录1"/>
<input type="submit" value="登录2"/>
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web">
<!-- https://www.baidu.com/s?wd=C%E7%BD%97 get 请求，以后也可以提交wd=xxx 提交数据 -->
<!-- input text 中设置value属性代表输入框内有默认值-->
<input type="text" name="query" value="123">
<input type="submit" value="搜索">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
<div>
<!--<select name="city">-->
<!--<option value="1">上海</option>-->
<!--<option value="2">深圳</option>-->
<!--<option value="3">香港</option>-->
<!--</select>-->
<!-- 多选 -->
<!--<a href="http://www.baidu.com" target="_blank">跳转吧，少年！</a>-->
<a href="#id1">皇马</a>
<a href="#id2">巴萨</a>
<a href="#id3">拜仁</a>
<a href="http://www.baidu.com">
<!--alt的意思是如果图片路径不存在那么显示内容-->
<img src="../image/search1.jpg" title="克里斯蒂亚诺" style="height: 500px;width: 200px;" alt="金球先生">
</a>
<p></p>
<!-- 加上ID，使得超链接跳转到页面对应的标签位置-->
<div id="id1" style="height: 500px;">皇马</div>
<div id="id2" style="height: 500px;">巴萨</div>
<div id="id3" style="height: 500px;">拜仁</div>
<!--ul ol dl 列表-->
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<ol>
<li>312</li>
<li>312</li>
<li>312</li>
<li>312</li>
</ol>
<dl>
<dt>123</dt>
<dd>222</dd>
<dt>123</dt>
<dd>333</dd>
</dl>
<!-- 表格 -->
<!-- a标签不能提交到后台，a标签拿来做超链接，且拿来做锚点-->
<!--<select name="city" multiple="multiple" size="10">-->
<!--<option value="1">上海</option>-->
<!--<option value="2">深圳</option>-->
<!--<option value="3">香港</option>-->
<!--</select>-->
<input type="text" name="user">
<p>请选择性别：</p>
<!-- 如果标签相同都是gender，那么就是互斥的状态 -->
男：<input type="radio" name="gender" value="1">
女：<input type="radio" name="gender" value="2">
<p>请选择爱好：</p>
<!-- checked 默认勾选 -->
足球：<input type="checkbox" name="favor" value="1" checked="checked">
篮球：<input type="checkbox" name="favor" value="2" checked="checked">
排球：<input type="checkbox" name="favor" value="3" checked="checked">
<p>请选择科目：</p>
语文：<input type="checkbox" name="skill" value="1">
数学：<input type="checkbox" name="skill" value="2">
英语：<input type="checkbox" name="skill" value="3">
<p>上传文件</p>
<!--下面这样默认发不了文件，因为它依赖form表单的一个属性multipart/form-data-->
<input type="file" name="fname">
</div>
<p></p>
<!--多行输入，且默认值要放中间，不是value-->
<textarea name="memo">12312312312</textarea>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 表格 （简单写法） -->
<!--<table border="1">-->
<!--<!– 表示一行 –>-->
<!--<tr>-->
<!--<!– 表示一列 –>-->
<!--<td>第一行第一列</td>-->
<!--<td>第一行第二列</td>-->
<!--<td>第一行第三列</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>-->
<!--<a href="s1.homework">第二行第一列</a>-->
<!--</td>-->
<!--<td>第二行第二列</td>-->
<!--<td>第二行第三列</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>第三行第一列</td>-->
<!--<td>第三行第二列</td>-->
<!--<td>第三行第三列</td>-->
<!--</tr>-->
<!--</table>-->
<!-- 表格详细版写法（推荐用这种） -->
<table border="1">
<thead>
<tr>
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
</thead>
<tbody>
<tr>
<!-- 合并单元格 （上下） -->
<td rowspan="2">11</td>
<!-- 合并单元格 （左右） -->
<td colspan="2">21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</tbody>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="user">用户名：</label>
<input id="user" type="text" name="username">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../homework/form.css"/>
<!--<style>-->
<!--/*.c1{*/-->
<!--/*height:100px;background-color:#a99e3a;*/-->
<!--/*}*/-->
<!--/*div{*/-->
<!--/*height:50px;background-color:#99216b;*/-->
<!--/*}*/-->
<!--/* 层级标签 */-->
<!--/* .cl,.c2 组合选择器 */-->
<!--/*span div{*/-->
<!--/*height: 30px;background-color: rebeccapurple;*/-->
<!--/*}*/-->
<!--/*!*<!– 属性选择器 .c1–>*!*/-->
<!--/*input[type='text']{width: 340px;height: 120px;}*/-->
<!--/*.c2 {*/-->
<!--/*background-color: aqua;height: 129px;*/-->
<!--/*}*/-->
<!--/*.c1 {*/-->
<!--/*background-color: rebeccapurple;color: red;font-size: 30px;*/-->
<!--/*}*/-->
<!--</style>-->
</head>
<body>
<!-- 给标签加入了属性，这就是CSS -->
<!-- 由于id不能重复，如果想实现样式重用一般都用class的方式-->
<!-- 优先级写在当前标签的style优先级最高，其次是写在头部style中最底部的优先级高-->
<div class="c1" style="background-color: red">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<span>
<div>
<input type="text">
<input type="password">
</div>
</span>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 边框 像素大小 实线虚线 颜色 -->
<!-- float 浮动效果（有坑，还不知道是什么） -->
<div style="border: 4px solid red; float: left; width: 20%;height: 40px;text-align: center;line-height: 40px">
asfasfafa
</div>
<div style="float: left; width: 40%; background-color: red">
sss
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header {
height: 15px;
background-color: rebeccapurple;
}
</style>
</head>
<body style="margin: 0 auto;">
<div class="pg-header">
</div>
</body>
</html>
扫一扫
69
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
