(1) web 的含义:
首先要了解,web与服务器这是一种BS架构,服务于浏览器界面的.与服务器之间通过HTTP,HTTPS ftp等进行通讯的
运行过程: 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面
(2) html 的含义
html 是超文本标记语言.是用来创建网页的标记语言 可以理解成:房子的骨架
是浏览器可以识别的规则,根据规则渲染我们的网页,对于不同的浏览器同一标签可能会有不同的解释,(因为浏览器的兼容性不同)
一, html 的编写规范:最基本的html:
<!DOCTYPE html> #声明为html文档
<html lang="zh-CN"> #如果输入的内容是汉字,则需要设置成'zh-CN' 英文则设置成 'en'
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
#注释:
#<!DOCTYPE html>声明为HTML5文档。
#<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
#<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
#<title>、</title>定义了网页标题，在浏览器标题栏显示。
#<body>、</body>之间的文本是可见的网页主体内容。
语法以及注意事项:
<1> <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名> 理解;标签内可以带属性也可以不带属性,视情况而定
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
<2> id ===> 定义标签的唯一ID
class ===>为html 元素定义一个或者多个类名(classname)
style ===> 规定元素的行内样式
注释的格式: ====> <!--注释内容--> 注释内容填充你要表达的内容,分段注释有助于维护代码
二, 不同部分的常用标签和总结
(1) head常用标签: <title>内容</title> ====>定义网页的标题 <script>内容</scrtpt> ====>定义Js代码或引入外部JS
<style>内容</style> =====>定义内部样式表(css) <meta/> =====>定义网页原信息
<link/> =======> 引入外部样式表文件
meta: 标签拥有两个属性,不同的属性又有不同的参数,这些不同的参数实现了不同的网页功能
属性1: http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内
容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
属性2: name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">
(2) body
一, 常用标签分类:
<1>, 块级标签 理解 :在网页中独占一行
1,<h1>一级标题内容</h1> ~~ <h6>一级标题内容</h16> 1级标题到6级标题,字体越来越小
2,<p>段落标签</p> ====> 段落标签, 注意标签内容中唔落有多个空格或换行,网页中只显示一个空格
3,<hr> ====> 表示一条水平线
4,<li> ====> 表示列表标签
5,<tr> ====> 表示占一行,制表用
6,<div> 内容</div> ====> 表示块级样式,没有实际意义,主要通过CSS来实现样式修改表现
<2>,行内标签,内联标签 理解: 可以多个内容在一行显示
1,<a href = 'http://www.baidu.com'> 内容</a> =====>表示超链接标签 理解:用来设置静态连接
2,<span>内容</span> ======>表示内联样式标签,没有时间意义,主要通过CSS来实现样式修改表现
3 <img src="aabcc.jpg" alt="新垣结衣" target='新垣结衣'> =====>表示图片标签, src属性表示的是图片的路径(本地或者网络路径) alt属性表示图片说明
4, <b>加粗内容</b> ===>内容加粗标签 target 属性表示鼠标悬浮时提示信息
<i>j斜体内容</i> ====>将内容变斜体
<u>下划线</u> ===>给内容加上下划线
<s>删除</s> ====>给内容加上中横杠,代表删除
<3>特殊的字符标签
===>空格 ¥ ====>表示 ¥ 号
> ====>表示 > 号 < ====>表示 < 号
& ====>表示 & 号
© ====>表示 版权 号 %reg; ====>表示 注册 号
<4> <a>超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，
还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
什么是url???
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
URL
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
注意: href属性 指定目标网页地址。该地址可以有几种类型：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
target属性 _blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
<5> 列表
无序列表:<ul type= 'disc'> type属性的值: disc（实心圆点，默认值） circle(空心圆圈)
<li>内容</li> square(实心方块) none(无样式) 这个用的多
</ul>
有序列表:<ol type= '1' start= '2'> type属性的值: 1 数字列表，默认值 A 大写字母(start数字代表顺序)
<li>内容</li> a 小写字母 I 大写罗马数字 i 小写罗马数字
</ol>
标题列表:<dl>
<dt>标题1</dt>
<dd>内容</dd>
</dl>
<6>表格<table>内容</table>
由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格的基本结构:
<table> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table>
表格的属性: border ===> 表格边框 设置数字单位是PX
cellpadding ====> 内边距 cellspacing ===>外边距
width =====> 像素百分比,最好通过像素设置长宽
rowspan =====> 单元格竖跨多少行 colspan =====>单元格横跨多少列
二,标签的嵌套
注意事项: 1,尽量不要用内联标签包块儿级标签
2,p标签不能嵌套P标签
3,p标签不能嵌套div标签
三,获取用户输入的标签
1, <form>内容</form> ====> 表单标签
表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。表单一般用来收集用户的输入信息
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、select、fieldset和 label标签。
重点: form表单提交数据的注意事项:
1,form 标签必须把获取用户输入的标签包起来
2,form不是from,form标签必须有action属性和method
3,form中的获取用户输入的标签必须要有name属性
表单的属性:
accept-charset =====>规定在被提交表单中使用的字符集（默认：页面字符集）。
action =====>规定向何处提交表单的地址（URL）（提交页面）。
autocomplete ======> 规定浏览器应该自动完成表单(默认:开启)
enctype ======> 规定被提交数据的编码(默认：url-encoded)
method =====>规定在提交表单时所用的 HTTP 方法（默认：GET）。
name ======>规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novaildate =======> 规定浏览器不验证表单
target =======>规定action属性中地址的目标(默认:_self)
2,<input/> 输入的标签,是一个自闭合标签
属性说明: name ====> 表单提交时的“键”，注意和id的区别 value ====> 表单提交时对应项的值 type="button", "reset", "submit"时，为按钮上显示的文本年内容 type="text","password","hidden"时，为输入框的初始值 type="checkbox", "radio", "file"，为输入相关联的值 checked =====> radio和checkbox默认被选中的项 readonly =====> text和password设置只读 disabled =====> 所有input均适用 type属性值 表现形式 对应代码 text 单行输入文本 <input type=text" /> password 密码输入框 <input type="password" /> date 日期输入框 <input type="date" /> checkbox 复选框 <input type="checkbox" checked="checked" /> radio 单选框 <input type="radio" /> submit 提交按钮 <input type="submit" value="提交" /> reset 重置按钮 <input type="reset" value="重置" /> button 普通按钮 <input type="button" value="普通按钮" /> hidden 隐藏输入框 <input type="hidden" /> file 文本选择框 <input type="file" />
3,<select >内容<select/> =====>选择标签
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> <option value="3">广州</option> <option value="4">深圳</option> </select> </form>
属性说明： multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
4,<lable>内容</lable> <label> 标签为 input 元素定义标注（标记）。
1,label 元素不会向用户呈现任何特殊效果。
2,<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
5,<textare>内容</textarea> =====>区域输入标签 如:评论
属性: name ====>名称
rows ====>行数
cols ====>列数
disable ====> 禁用
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>