域名 -- ip地址 -- 192.168.1.10
https://192.168.1.10:80 -- www.jd.com -- DNS解析 {‘www.jd.com‘:‘192.168.1.10‘,}
请求:浏览器socket客户端给服务端发信息
响应:服务端socket给客户端回信息
Html标签:超文本标记语言,就是标记用的.
必须是封闭的
<meta >
<h1></h1>
标签属性 id=‘xx‘ asdfasfd=‘xxx‘
<h1 id=‘xx‘ asdfasfd=‘xxx‘>
两类:
内敛标签(行内标签):不独占一行,内敛标签只能嵌套内敛标签 b\i\u\s\button\span\img\a
块级标签(行外标签):自己独占一行,可以嵌套内敛标签和某些块级标签 \h1-h6\br\hr\p\div
p标签:不能嵌套p标签,也不能嵌套块级标签
<title></title> 定义网页标题
<meta/> 定义网页原信息\配置信息(了解)
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p> #独占一个段落
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--换行-->
<br>
<!--水平线\分割线-->
<hr>
img标签
图片标签
属性 src=‘图片路径‘ 网络地址的绝对路径\本地相对路径
示例:
<img src="1.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">
a标签 超链接标签
属性
href:超链接的地址
target:是否新建窗口
target="_self" 当前窗口打开某个路径对应的html页面
target="_blank" 新建窗口打开某个路径对应的html页面
示例:
<a href="https://www.baidu.com" target="_blank">百度</a>
列表标签
无序列表:
<ul type="none">
<li>太白</li>
<li>alexdsb</li>
<li>景女神</li>
</ul>
有序列表:
<ol type="a" start="2">
<li>大壮</li>
<li>B哥</li>
<li>灭霸</li>
<li>雪飞</li>
</ol>
标题列表标签
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
特殊字符
空格:
小于号:<
大于号:>
&符号:&
...
表格标签(重点)
table
cellpadding:文字和内边框的距离
cellspacing:内边框和外边框的距离
border:边框宽度
<table border="1" cellpadding="10" cellspacing="20">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>B哥</td>
<td>40</td>
<td>炒鸡蛋</td>
</tr>
<tr>
<td>大壮</td>
<td>38</td>
<td>抽烟喝酒烫头</td>
</tr>
<tr>
<td>雪飞</td>
<td>18</td>
<td>大壮</td>
</tr>
</tbody>
</table>
action:指定数据提交路径
input标签:
type属性:控制输入框的样式的
name属性:分组,携带数据的key key:value
value:选择框提交数据的时的值,输入框的默认值
input type属性的值:
text 单行输入文本 <input type=text" />
password 密码输入框（不显示明文） <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" name=‘x‘ />
radio 单选框 <input type="radio" name=‘x‘ />
submit 提交按钮 <input type="submit" value="提交" /> #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新
reset 重置按钮 <input type="reset" value="重置" /> #页面不会刷新，将所有输入的内容清空
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" /> （等学了form表单之后再学这个）
<form action="http://127.0.0.1:8001">
用户名:<input type="text" name="username" value="dazhuang">
密码:<input type="password" name="password" value="111">
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="checkbox" name="hobby" value="a"> 喝酒
<input type="checkbox" name="hobby" value="b"> 抽烟
<input type="checkbox" name="hobby" value="c"> 烫头
<input type="submit">
<hr>
<input type="date">
<input type="button" value="普通按钮">
<input type="reset">
<input type="hidden">
<input type="file">
</form>
form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通的按钮
<input type="submit">
<button>提交按钮</button>
input标签的其他属性
checked默认选中
<input type="radio" name="sex" value="2" checked>女 #简写方式,当属性名和属性值相同时可简写
<input type="checkbox" name="hobby" value="a"> 喝酒
<input type="checkbox" name="hobby" value="b" checked="checked"> 抽烟
<input type="checkbox" name="hobby" value="c" checked="checked"> 烫头
readonly 只读 针对的是输入框 text password
disabled 不允许操作 所有的input都可以设置
设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的
单选
<select name="city">
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">深圳</option>
</select>
多选:multiple
<select name="city" multiple>
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">深圳</option>
</select>
标识标签的功能的
方式1:for:执行对哪个标签进行标识
效果:点击label标签中的文字,就能让标识的标签获得光标
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">
方式2:
<label>
密码:<input type="password" name="password" value="111" disabled>
</label>
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
name：名称
rows：行数 #相当于文本框高度设置
cols：列数 #相当于文本框长度设置
disabled：禁用
内敛标签:不独占一行,只能嵌套内敛标签
块级标签:独占一行,能嵌套内敛标签和某些块级标签
<img > 自封闭
<div></div> 全封闭
? meta标签,title标签
h1-h6 b u s i p span div br hr img a form input button table ul li ol li select label
textarea dl dt dd
特殊符号 空格...
type属性
text password date radio checkbox file submit reset button hidden
name属性 分组,提交数据时的key,提交的数据value
value属性 指定默认值
默认选中 checked属性
readonly 只读
disabled 禁用
<table border="1" cellpadding="1" cellspacing="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>alexdsb</td>
<td>84</td>
<td>吹牛逼</td>
</tr>
</tbody>
</table>
<form action="地址">
<input type="text" name="username">
<input type="radio" name="sex" value="1">
<input type="radio" name="sex" value="2">
<input type="submit">
<button>提交</button>
</form>
<img src="图片地址" alt="图片未加载成功的提示信息" title="鼠标悬浮的提示信息" width="1" height="1">
<a href="超链接地址" target="_blank"></a>
<a href="超链接地址" target="_self"></a>
<select name="city" multiple>
<option value="1">上海</option>
<option value="2" selected>深圳</option>
<option value="2">惠州</option>
</select>
selected默认选中
multiple 多选
<label for="username1">用户名</label>
<input type="text" name="username1" id="username1">
<label>
<input type="text" name="username2" id="username2">
</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
CSS选择器(Cascading Style Sheet，层叠样式表)
css代码写法: h1{color:red;} 选择器{css属性:属性值;}
css代码引入
方式1
head标签里面写
<style>
div{
background-color: red;
height: 100px;
width: 100px;
}
</style>
方式2
内敛样式:
<div style="background-color: blue; height: 200px;width: 200px;"></div>
方式3
外部文件引入
head标签里面写link标签
<link rel="stylesheet" href="文件路径">
元素选择器:
div{ #标签名字
color:red;
}
id选择器:id值不能重复
<div id="xuefei">
雪飞大美女
</div>
#xuefei{
color:green;
}
类选择器: 类值可以重复
<div id="dazhuang" class="c1">
大壮dsb
</div>
<div id="xuefei" class="c1">
雪飞大美女
</div>
.c1{
color: green;
}
div.c1{ #div标签里面含有class值为c1的标签
color: green;
}
通用选择器
*{ #找到所有的标签
color: green;
}
div a{ #找到div标签后代里面的所有a标签
color:red;
}
div>a{ #找到div的儿子标签这一代的a标签
color:red;
}
div+a{ #找到是紧挨着div标签的下一个标签(是兄弟标签)
color: red;
}
div~a{ #找到的是同级的后面的所有兄弟标签
color: red;
}
#通过属性名来查找
[title]{ #找到所有含有title属性的标签
color: red;
}
div[title]{ #含有title属性的div标签
color: red;
}
#通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title=‘666‘]
input[type=text]{ #含有type属性,并且type属性的值为text的input标签
background-color: red;
}
多个选择器选择的标签设置相同css样式的时候,就可以用分组
div,p{ #div选择器和p选择器共同设置相同的样式,可以逗号分隔
color:red;
}
a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多,可以应用在其他标签上
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
/*伪元素选择器*/
div:first-letter{
color: red;
font-size: 20px;
}
/*在p标签内容的前面插入一些内容*/
p:before{
content: ‘?‘;
color: green;
font-size:100px;
}
/*在p标签内容的后面插入一些内容*/
p:after{
content: ‘哈哈!‘;
color: pink;
}
/*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
/*id选择器优先级为100*/
/*#d1{*/
/*color:deepskyblue;*/
/*}*/
/*!*继承的优先级为0*!*/
/*body{*/
/*color:red;*/
/*}*/
/*!*类选择器的优先级是10*!*/
/*.c1{*/
/*color: blue;*/
/*}*/
/*.c2{*/
/*color: orange;*/
/*}*/
/*!*元素选择器优先级是1*!*/
/*div{*/
/*color: green;*/
/*}*/
内敛样式优先级为1000
<p class="cc3" style="color: red;">我是cc3的p标签</p>
important优先级最高,最牛逼
.cc1 .cc3 {
color: purple!important;
}
高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
div{
width: 100px; 宽度
height: 100px; 高度
background-color: pink;
}
补充:a标签的字体颜色设置必须选中a标签才行
.c1 a{
color: red;
}
.c1{
font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;
}
.c1{
/*font-family: ‘楷体‘,‘宋体‘,‘微软雅黑‘;*/
font-size:14px; 默认字体大小为16px.
}
color:red;
.c1{
font-weight: bold;
font-weight: 100;
}
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
p{
/*color: red;*/
/*color: #78FFC9;*/
/*color: rgb(123,199,255);*/
color: rgba(123,199,255,0.3); 多了一个透明度的数字:0-1的一个数字
}
text-align
div{
width: 200px;
height: 200px;
background-color: yellow;
/*text-align: center;*/
text-align: right;
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
text-decoration
div a{
/*text-decoration: none;*/ #给a标签去除下划线
/*text-decoration: line-through;*/
text-decoration: overline;
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
p {
text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}
背景颜色
background-color: red;
div{
width: 600px;
height: 600px;
/*background-color: red;*/
/*background-image: url("yeye.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: 100px 50px;*/ 相对于div标签的,距离左边100px,距离上面50px
background:url("yeye.jpg") no-repeat left center;
/*background-position: right top;*/
}
简写方式,颜色 图片路径 是否平铺 图片位置
background:#ffffff url(‘1.png‘) no-repeat right top;
原文：https://www.cnblogs.com/shaohuagu/p/12327317.html