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>