HTML(知识——示例——注释)
1.网页
1.1 什么是网页：网站是网页的集合，网页是HTML
1.2什么是HTML：超文本标记语言（超越文本限制，超级链接文本）
1.3网页的形成：前段开发代码——>浏览器显示代码（解析、渲染）——>生产web页面
2.浏览器
2.1常用的浏览器：火狐，谷歌，safari，苹果，IE(edge)，opera
2.2浏览器内核（渲染引擎）：读取网页内容，整理讯息，计算网页的显示方式，显示页面
3. web标准
W3C
3.1为什么需要标准：约束代码
3.2：web的组成：结构表现行为
1. 结构HTML
2. 表现CSS
3. 行为JavaScript
4.HTML标签
标签的书写注意规范，HTML骨架，超链接标签，图片标签（alt和title区别），相对路径三种形式
1.HTML语法规范
1.1语法基础
1. <>标签在尖括号中
2. 一般成对，也有单（反斜杠 <br/>）
1.2标签关系
双标签关系：包含（嵌套，父子）关系 并列关系
2.基本结构标签
2.1第一个HTML网页
<html>
<head>
<title>first page</title>
</head>
<body>broken keyboard means great salary
</body>
</html>2.2vscode
1.Ctrl+N 生成新
2.Ctrl+S 保存
3.网页开发工具
VSCode工具生成骨架标签新增代码
1. <!DOCTYPE>标签：文档类型声明标签（html版本）
2. lang：语言language zh-CN/en
3. charset字符集：<meta chatset=“UTF-8”>（乱码）
4. 总结
4.HTML常用标签
4.1标签语义
标签的含义：标题标签，段落标签
4.2标题标签
1）<h1><h6>字号依次变大
2）独占一行
4.3段落标签
自动换行alt+z
<p></p>
1）文字排版随大小自动调整
2）段落和段落间有空隙（一行）
<br />：break 强制换行（有空格）
4.4文本格式化标签
<strong>加粗</strong>
<b>加粗<b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除</del>
<s>删除</s>
<ins>下划线</ins>
<u>下划线</u>
4.5<div><span>标签
<div> <span>是没有语义的，就是个盒子，用来装内容
div一行只能放一个，是大盒子
span一行放好几个，是小盒子
4.6图像标签
<img src=“img.jpg” />
标题独占一行
<img src=“img.jpg” alt=“显示不出来时 替换的文字”>
title （图片显示的文字
width（宽
height（高
border（边框像素
空格分开 键值对
4.8目录文件夹和根目录
目录文件夹：存放相关素材的普通文件夹
根目录：目录文件夹第一层
路径：
1）相对路径：以HTML为基准（/下一级 ../上一级 同一级（无））
2）绝对路径：磁盘、网络绝对路径
4.9超链接
1. 语法格式
外部链接：<a href="https://网址" target=“ _blank/_top/_parent/_self”> 文本或图像 </a>
内部链接：<a href="内部链接" target="_blank" > 文本或图像 </a>
空链接：<a href="#" target="_blank" > 空链接 </a>
下载链接：<a href="内部链接" target="_blank" > 文本或图像 </a>（下载压缩包或exe）
网页元素链接：<a href=".." target="_blank" > 网页元素（图像，文本，表格，音频，视频）</a>
锚点链接：<a href="#live" > 生平 </a> <h1 id="live">生平</h1>（超链接的标签）
5.0注释和特殊字符
5.1注释
<!-- -->(ctrl+/)
5.2特殊字符
空格： :
小于：⁢
大于：>
对一个文章，运用素材库，分解成网页
6.表格
1.表格标签：展示、显示数据。
table：表格
tr：行
td：格 格中数据（嵌套关系） （单元格）
<table>
<tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr>
</table>th：表头单元格（是格 和td同级的）（加粗 居中）
align(位置 居中) border（边框） cellpadding（格子的内间距，格子与内容） cellspacing（格子间的间距） width（宽）
例子：
表头th 表格table td tr 链接a
<body>
<table align="center" width="450px" border="1px" cellspacing="0px">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>456</td>
<td>456</td>
<td><a href="http://bilibili.com">相关链接</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td>456123</td>
<td>456123</td>
<td><a href="http://bilibili.com">相关链接</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td>456456</td>
<td>456456</td>
<td><a href="http://bilibili.com">相关链接</a></td>
</tr>
</tbody>
</table>
</body>thead tbody
格式好看
1.6合并单元格
rowspan（目标为上侧）=2
colspan（目标为左侧）=2
1.跨行跨列？找目标单元格
2.写合并代码
3. 删除
shift+ alt +方向键↓
2.列表标签
2.1无序列表
<ul>
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
</ul>ul只能放li
li是一个容器 可以放任一元素
应用
2.2有序列表
ol li 同无序
2.3自定义列表
形如
dl dt dd
3.表单标签
3.1意义
收集信息
3.2组成
表单域 表单控件
3.3表单域（先有表单域 先有表单域 先有表单域）
送到后台信息的范围（范围内都送到后台）
<form ></form>
<form action="demo.php"(送达哪) method="POST"（方式） name="name1" （表单名称）>
3.4表单控件（表单元素）
1）input：单标签；
type（输入模式不同）
1. text
2.password
3.radio
4.chechbox
5. submit：提交给服务器
6. reset：重置按钮
7.button（和js事件）：按钮触发事件
8.file：上传文件
name：解决单选问题 一组单选按钮和复选框 要有同样的name值
value：传到后台的值
checked：按钮赋默认值
maxlength：输入字符的最大长度
<form action="">
用户名：<input type="text" name="username" value="请输入用户名"><br>
<!-- 文本框：用户可以输入任何文字 -->
密码：<input type="password" name="psw" value="请输入密码"><br>
<!-- 密码：看不见输入内容 -->
性别：男<input type="radio" name="sex" value="男"> 女 <input checked=“checked” type="radio" name="sex"><br>
<!-- 单选按钮，多选一 -->
是否同意隐私协议<input type="checkbox">
<!-- 多选框 可以多次选择 不互斥 -->
<!-- checkbox单选按钮和复选框可以在页面打开的时候赋默认值 -->
<br><input type="submit" value="免费注册">
<br><input type="reset" value="重置信息">
<br><input type="button" value="获取短信验证码">
<br><input type="file" value="上传文件">
</form>
<label>标签的for属性 与相关元素的id属性相同
<label for="usn">用户名：</label>
<input type="text" id="usn">2） 下拉菜单
select
option option
select
籍贯：
<select name="" id="">
<option value="">北京</option>
<option value="">天津</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="" selected="selected">深圳</option>
<option value="">成都</option>
</select>3）文本域（表单元素 包含在表单域form）
textarea
1.在form里
2.>内容是文本框里默认<
注：
1.input select textarea都有name属性
2.表单域 form 文件域file（input type） 文本域textarea
例子：
思路 ：
1. 标题
2. 眼睛里看到的是单元格
好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<table width="500px" >
<tbody>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
</td>
</tr>
<tr>
<td>
生日
</td>
<td>
<select name="" id="" >
<option value="">2001</option>
<option value="">2002</option>
<option value="">2003</option>
<option value="">2004</option>
<option value="">2005</option>
<option value="">2006</option>
<option value="">2007</option>
<option value="">2008</option>
<option value="">2009</option>
</select>
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
</select>
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
</td>
</tr>
<tr>
<td>
婚姻状况
</td>
<td>
<input type="radio" id="wei" name="condition"><label for="wei" >未婚</label>
<input type="radio" id="yi" name="condition"><label for="yi" >已婚</label>
<input type="radio" id="li" name="condition"><label for="li" >离婚</label>
</td>
</tr>
<tr>
<td>
喜欢的类型
</td>
<td>
<input type="checkbox" name="like" id="wumei"><label for="wumei">妩媚的</label>
<input type="checkbox" name="like" id="keai"><label for="keai">可爱的</label>
<input type="checkbox" name="like" id="xianrou"><label for="xianrou">小鲜肉</label>
<input type="checkbox" name="like" id="meirou"><label for="meirou">老腊肉</label>
<input type="checkbox" name="like" id="dou"><label for="dou">都喜欢</label>
</td>
</tr>
<tr>
<td>
自我介绍
</td>
<td>
<textarea name="" id="" cols="20" rows="2">自我介绍</textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" value="免费注册">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="checkbox" name="" id="" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td>
</td>
<td>
<a href="#" ><ins>我是会员，立即登录</ins></a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<h3>我承诺</h3>
</td>
</tr>
<tr>
<td>
</td>
<td>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
1306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
