网站基本介绍
- 网站是由网站形成，而网页是由图片，链接，文字等元素组成的，就是html文件
- 常见浏览器有
- [图片上传中...(2021-04-26_095600.png-5a2152-1619509390420-0)]
Web标准
2021-04-26_095600.png
- web标准提出最佳的体验方案，结构、样式、行为相分离，即结构写到HTML，表现写到CSS文件、行为写到javascript文件
HTML标签
-
基本语法概述
- HTML标签是由尖括号包围的关键词，例如<html>
- HTML标签通常是成对出现的，例如<html></html>，我们成为双标签
- 有些特殊标签则必须是单标签，例如
,我们称为单标签
-
标签关系
- 包含关系:
<html><head></head></html> - 并列关系，
<head></head><body></body>
- 包含关系:
-
编辑器自动生成标签
-
<!DICTYPE html>意思是:当前页面是用HTML5版本来显示的网页 -
<html lang="en">意思是: 向搜索引擎声明当前文档的语言类型，en则是英语网站。zh-CN定义语言为中文网站 -
<meta charset="UTF-8">意思是:设置页面的解码方式，一般使用万国码UTF-8
-
-
标签语义
- 根据标签的语义，在合适的地方给一个合理的语义标签，可以使文档结构更加清晰
- h1-h6标签
- h1标签最大也是最重要，依次递减，h1-6标签都是会独占一行
- h标签是个双标签
- p标签
- p标签用于定义段落，它可以把整个网页分成若干个段落
-
<p>我是一个段落标签</p>
特点:
文本在一个段落中会根据浏览器窗口大小自动换行
段落和段落直接有比较大的空隙
- br单标签
- 主要是使标签强制换行
-
文本格式化标签
- 标签语义: 突出重要性，比普通文字重要
- 加粗
*<strong></strong>加粗效果，语义强烈-
<b></b>加粗效果语义不太强烈 - 推荐用前者
-
- 倾斜
*<em></em>倾斜效果，语义强烈-
<i></i>倾斜效果语义不太强烈 - 推荐用前者
-
- 删除线
*<del></del>倾斜效果，语义强烈-
<s></s>倾斜效果语义不太强烈 - 推荐用前者
-
- 下划线
*<ins></oms>倾斜效果，语义强烈-
<u></u>倾斜效果语义不太强烈 - 推荐用前者
-
常用标签
- 图像标签
* img标签用来展示图片，是行内块元素
* src属性用来设置图片路径。
* alt属性设置图片显示不出来时用文字显示土豪
* title属性用来设置提示文本，鼠标放在图像上显示的文字
* width和height分别设置图像的宽度和高度，如果只设置了一个值则另一个会等比例缩放
* border用来设置边框的粗细 - 超链接标签
- a标签用来跳转网址，是行内元素
- href属性用来设置跳转网址(必须属性)，href的值必须是完整的http://www.qq.com网址。
- 外部链接中，只需要href的值是一个完整的网址即可
- 内部链接中，只需要href的值为链接的文件路径即可
- 空链接，需要href的值是一个#号，这样即使点击也不会跳转了
- 下载链接，需要href的值是一个文件或者压缩包的路径，点击后即可下载了
- 锚点链接可以快速跳转到页面的某个位置，需要href的值是要跳转位置标签的#id即可
- target属性用来设置链接页面打开方式,_self为默认值，_blank为新窗口中打开方式
特殊字符
- 2021-04-26_144237.png
可以通过特殊符号代码在页面中显示一些特殊符号
表格标签
表格主要用于显示、展示数据，因为数据用表格来展示会显得非常规整，可读性很好。
表格的基本语法由
<table>、<tr>、<td>标签组成- 2021-04-26_222958.png
<table>是用于定义表格的标签，表格必须被包裹在里面<tr>是用于定义表格行的标签，必须嵌套在<table>标签中，表格只有行的概念没有列的概念<td>用于定义表格中的单元格，必须嵌套在<tr>中第一行的数据一般都起到限制其他数据内容的作用，所以比较重要，一般用
<th>标签来包裹，th标签会默认添加加粗效果表格结构标签有
<thead>、<tbody>两个标签，这两个标签里面必须要有tr标签-
表格属性，主要是放在table标签上面
2021-04-27_081621.png -
单元格合并
- 先确定是跨行合拼还是跨列合并
- 如果是跨行则在要合并的单元格最上面写上 合并方式=合并单元格数量
<td colspan="2"></td> - 如果是跨行合并则写
rowspan="合并的个数"、如果是跨列合并则写colspan="合并的个数" - 删除多余的单元格
字母td指表格数据(table data),即数据单元格的内容
列表标签
- 列表天生就是用来布局的，因为列表非常整洁，和谐，列表分为有无列表，无序列表，自定义列表
- 无序列表
- ul>li*...，排列方式即为一个ul里面好多个小li，并且ul里面只能放li标签，li里面可以放任何元素
- 无序列表会自带的小黑点的样式属性
- 有序列表
- ol>li*...，排列方式同无序一样，不过是把ul替换成为ol
- 自定义列表
- dl>dt...+dd...,排列方式为dl里面包含着dt和dd，第一行可以是dd或者dt。并且dd和dt没有数量限制
- dt会自带左移属性
表单标签
表单有表单域，表单控件，提示信息三种
-
表单域
- 表单域可以用
<from action="url地址" method="提交方式" name="表单域名称"来定义，表单域会把范围内的表单元素提交给服务器 -
表单属性2021-04-27_104954.png
- 表单域可以用
-
表单元素
- 表单元素是在表单域中可以输入的内容的控件，即表单控件
- 表单元素input标签，包含一个type属性
<input type="属性值">，根据不同的属性值，可以进行不同的字段输入形式（文本，按钮，复选框，按钮。。） - 可取的属性值
- 2021-04-27_125636.png
text属性:一个文本框，用户可以输入任何数字
password属性:一个密码框，用户看不见输入的文字
radio属性: 单选按钮，可以实现单选和多选
checkbox属性: 复选框，可以实现多选
submit属性: 提交按钮，可以把 表单域from 里面的表单元素的值全部提交给后台服务器
button：普通按钮，一般用来触发js事件
reset: 重置按钮，点击后就会重置表单的数据
file: 文件按钮，点击后会弹出一个文件框，选择上传文件
- 其他属性
- 通过给多个单选按钮在name属性上提供统一的name值即可实现单选功能
- value:如果是给text或者password属性的则会是默认值，如果是给radio。checkbox则会定义选用此按钮返回的值
- checked:可以让此input元素首次加载时就被选中
- maxlength: 规定了此input元素最多输入字符的长度
- lable标签
- lable标签是行内元素，包含一个for属性，可以填写input的id，这样lable标签被点击就相当input被点击了
- select标签
- select标签是块级元素，页面中如果有多个选项让用户选择，并且想要节约空间时，我们可以使用
<select>标签定义下拉列表 - select标签里面至少包含一对
<option>选项标签，在option标签中定义selected时，当前项即为默认选择项
- select标签是块级元素，页面中如果有多个选项让用户选择，并且想要节约空间时，我们可以使用
- textarea标签
- 文本域标签，有时候一行的文字不太够，这时候就要请出文本域标签了，注意，这是个标签，想给它添加默认值直接在里面添加文字就行了
元素显示模式
- 元素显示模式就1是元素以什么方式进行显示，比如div独占一行，一行可以放多个span
- HTML元素一般分为块元素和行内元素两种类型
- 块状元素特点
1. 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素
2. 块元素比较霸道，自己独占一行
3. 高度宽度已经内外边距都可以控制
4. 宽度默认会继承父容器的宽度
5. 可以装作一个容器，里面放行内或者块级元素
6. 文字标签里面不允许放块元素 - 行内元素特点
1. 常见的行内元素有<a>、<strong>、<b>、<del>、<s>、<ins>、<u>、<i>、<em>、<span>，行内元素也叫内联元素
2. 相邻行内元素在一行可以并排，同在一行显示，
3. 行内元素不可直接设置宽高
4. 行内元素的高度和宽度一般是由内容撑开的
5. 行内元素只能容纳文本或其他行内元素
6. 行内元素不可设置上下外边距，只能设置左右外边距，并且内边距虽然生效但只是表象，实际并不占空间
7. a标签里面不能再放a标签，特殊情况下a标签里面可以放块级元素，但是给a标签转换一下块级比较安全 - 行内块元素
1. 常见的行内块元素有：<img/>,<input/>、<td/>，它们同时具有块元素和行内元素的特点
2. 可以和相邻的行内元素(行内块)在一行上并排显示，不过之间会有空隙(行内元素特点）
3. 默认宽度为内容本身宽度(行内元素特点)
4. 高度、行高、内外边距都可以控制(块级元素特点)
