生成html5骨架的快捷键
html:5加回车，生成html骨架
注释:ctrl+/
<!-- 注释 -->
<!DOCTYPE html> 文档类型声明标签，告诉浏览器使用哪种类型的html
<html lang="en"> 当前文档的显示语言，en为English,zh-CN为中文
<head>
字符集为utf-8,其他还有GB2312(简体中文),GBK(简体中文加繁体中文),BIG5(繁体中文)
<meta charset="UTF-8">
浏览器私有配置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
搜索引擎优化：
搜索时抓取的关键字
<meta name="keywords" content="1,2,3,4">
对于网站的描述
<meta name="description" content="表述">
标题标签
<title>Document</title>
</head>
<body>
</body>
</html>
标签：
单标签:img,hr,br,
双标签:h1-h6,div,span,p,a......
等级：容器级，文本级：
容器级：元素内部除了文本之外，还可以嵌套标签
文本级：存放文本和文本级标签
容器级：div,ol,ul,dl,dt,dd,h1-h6......
容器级:span,img,b,u,i......
标签属性:<a href="www.baidu.com" title="">我是a标签</a>
多个属性用空格隔开
空白折叠现象:用 代替多个空格
1.标题标签 h标签
有h1-h6
从h1-h6字号逐渐减小，文本内容从重到轻
快捷键:h$*6生成h1-h6
2.段落标签
p标签
3.换行标签
<br />
4.img标签
<img src="" alt="">
<img src="images/VA.jpg" title="安赛龙" alt="安赛龙" width="220px">
src是引入路径
alt图片加载不出来时的替换文本
width设置宽度高度，并不会同时使用
title设置鼠标移上图片悬停文本
border加载边框 eg.border="10"
相对路径和绝对路径：
进入文件夹用"/",出文件夹用"../"
绝对路径:用盘符:C:/Users/XXX/Desktop/XXX.jpg(基本不使用)
网站的绝对地址
<img src="https://pic.baike.soso.com/ugc/baikepic2/0/ori-20210517162433-877277543_png_401_553_222865.jpg/800" alt="周杰伦">
5.a标签锚点
文本级标签
在指定位置增加一个超链接，从而实现跳转
targer属性：
_self是自己窗口的跳转
_black是新窗口
<a href="https://www.baidu.com/">百度</a>
a标签的跳转<a href="My html.html">跳转吧</a>
target:是否在新标签页打开链接,值一定是"_blank"
<a href="My html.html" target="_blank">跳转吧</a>
title:鼠标移上文字时的悬停文本 <a href="https://www.baidu.com/" title="zhoujielun">百度</a>
a标签设置锚点：
点击超级链接，实现页面内的跳转
方法1：设置name属性空锚点，设置href属性，两个属性一样
<a href="#dqjl">打球经历</a>
<a name="dqjl"></a>
<h3>打球经历</h3>
方法2:设置h标题的id属性:
<a href="#dqjl">打球经历</a>
<h3 id="dqjl">打球经历</h3>
6.文本格式化标签:
加粗：<strong></strong>或<b></b>
倾斜：<em></em>或<i></i>
删除线：<del></del>或<s></s>
下划线：<ins></ins>或<u></u>
8.div与span盒子:
<div>我是一个div我单独占一行</div>
<div>我是一个div我单独占一行</div>
div是跨度布局分割
span是文字分割
<div>
我是一个 <span style="color:red;">div</span> 我单独占一行
</div>
列表:无序列表，有序列表，定义列表
1.无序列表：
ul是无序列表，li是列表项
type可以设置前面的符号
none
无序列表的嵌套
<h1>四大名著</h1>
<ul>
<li>西游记
<ul>
<li>孙悟空</li>
<li>唐僧</li>
<li>沙和尚</li>
<li>猪八戒</li>
</ul>
</li>
<li>红楼梦
<ul>
<li>贾宝玉</li>
<li>林黛玉</li>
<li>薛宝钗</li>
<li>王熙凤</li>
</ul>
</li>
<li>三国演义
<ul>
<li>刘备</li>
<li>曹操</li>
<li>诸葛亮</li>
<li>孙权</li>
</ul>
</li>
<li>水浒传
<ul>
<li>林冲</li>
<li>武松</li>
<li>松江</li>
<li>吴用</li>
</ul>
</li>
</ul>
列表项之间没有先后顺序之分
2.有序列表
ol,li
<h3>年级排名情况</h3>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
有序列表的嵌套
3.定义列表
dl dt dd
dl:表示常见一个自定义列表结构
dt:定义主题或者定义术语
dd:解释说明前面的主题内容
dl内部只能存放dt跟dd，dt跟dd是同级关系
<body>
<h3>歌手</h3>
<dl>
<dt>许嵩</dt>
<dd>有何不可，素颜</dd>
<dd>歌手</dd>
<dt>周杰伦</dt>
<dd>青花瓷，稻香</dd>
<dt>毛不易</dt>
<dd>消愁，不染</dd>
</dl>
</body>
表格：
table:表格
tr:定义了表格的行
td:定义了表格的单元格
table->tr->td
<table border="1" style="border-collapse:collapse;">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
<td>2,4</td>
</tr>
</table>
border是设置边框，否则边框不显示
style是合并单元格
th是表头
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
th嵌套在tr里
单元格的合并：
rowspan:上下跨行合并
colspan:左右跨行合并
<table border="1" style="border-collapse:collapse">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="3">3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
<td rowspan="2">14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td colspan="2">18</td>
</tr>
</table>
表格的分区：
标题，表头，主体
caption:定义表格的标题
thead:定义表格的表头，内部嵌套tr->th
tbody:定义表格的主体,内部嵌套tr->td
align设置文本对齐方式
cellspacing设置单元格间距
在body后面可以添加属性
例如：<body bgcolor="#ffc0cb">
οnclick="alert('坏宝')"
onclick是点击事件
alert是JavaScript提供的一个警告函数
它可以接受任何形式，接受的内容就是警告信息的内容
<body οnclick="alert('坏宝')">
hr是水平线标签
font是字体标签(已过时)
它可以用来修改字体face，颜色color，字号size(1-7)
常用的特殊字符
<> ===><
空格 ===>
iframe标签可以在页面上开辟一个小区域，显示界面
<iframe src="My%20html.html" frameborder="0" width="900" height="800"></iframe>
与列表的结合
iframe定义一个name
a中定义一个target=name
表单是html中用来收集用户信息的集合，这些信息发送给服务器
form标签就是表单
input输入框
type="text"是文本输入框
type="password"是密码输入框
type="radio"是单选框，可以通过name进行分组 checked="checked"这是默认选项
checkbox表示复选
select是复下拉列表框，其中嵌套option,代表每一个选项，selected="selected"代表默认
textarea是文本区域，rows属性是设置可以显示几行，cols属性设置每行可以显示几个字符，其中的内容是默认值
提交按钮是submit,value属性设置为其他文本
重置按钮是reset,value属性设置为其他文本
button是按钮
file是文件选择框
hidden是隐藏于，隐藏属性,需要发送属性给服务器，然而这些信息不需要用户看到
输入用户名:<input type="text" value="默认值" />
输入密码:<input type="password" />
选择性别:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
请选择国籍
<select>
<option>---请选择国籍---</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>小日本</option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="reset"/>
<br/>
<input type="submit">
<form action="localhost:8080" method="get">
这是表单的提交,action提交，method方法包括get与post
http://localhost:8080/?action=login&sex=on
出现这个的原因:
没有name属性
单选，复选和下拉列都要加value属性，以便发送给服务器
提交项不在表单的form标签中
get的格式是:
action+[?name=value&name=value]
get是不安全的
get参数是有限的
post属性:
相对于get属性更加安全
格式只有action
看不见参数，理论上没有长度限制
居中的设置方法:
文字水平居中:text-align: center
文字竖直居中:单行文字:设置行高与盒子一样高
多行文字:设置上下的相同的padding
扫一扫
07-18
2123
2123
04-02
169
169
04-04
587
587
06-27
234
234
06-07
1429
1429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
