前端之HTML
前端
1. 什么是前端
- 任何直接能够跟用户打交道的交互界面都可以称之为前端
2.软件开发架构
- C/S架构
- B/S架构
- 本质上B/S架构也是C/S架构
3.浏览器输入网址，发生了几件事
- 输入网址
- 朝服务端发送get请求
- 服务器接收请求并查询浏览器想要的数据返回给浏览器
- 浏览器拿到数据，展示页面
4.HTTP协议
- 超文本传输协议
- 客户端、服务端在数据交互的时候都必须遵循这套协议
HTML
1.html文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的-->
<title>css样式优先级</title>
</head>
<body>
<!--用户能够看见的内容都在body里面-->
<!--这是单行注释-->
<!--
这是多行注释
-->
</body>
</html>
2.html文件打开方式
- 找到该文件选择浏览器打开
- pycharm内自动打开
3.head内常用标签
<title> </title> <!--页面标题-->
<style> </style> <!--写css代码-->
<script> </script> <!--内部可以直接写js代码，也可通过src属性引入外部js代码文件-->
<link rel="stylesheet" href=""> <!--通过hre引入外部css文件-->
<meta> <!--显示网页源信息-->
<meta name='keywords' content="......">
<meta name='description' content="......">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<title>这是我的第一个前端页面</title>
<style>
h1 {
color: green;
}
</style>
<script>
alert('hello baby~')
</script>
<script src="04%20myjs.js"></script>
<link rel="stylesheet" href="03%20mycss.css">
</head>
<body>
<h1>来啦 老弟！</h1>
</body>
</html>
4.body内标签
基本标签
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s><p>段落标签</p>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6><!--换行-->
<br>
<!---水平线--> <pr>
特殊符号
<!--空格-->
> <!-->-->
< <!--<-->
& <!--&-->
¥ <!--￥-->
© <!--版权-->
® <!--注册-->
常用标签
div标签和span标签
div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。 这两个元素是专门为定义CSS样式而生的。
注意：关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
p标签不能包含块级标签，p标签也不能包含p标签
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至一个应用程序
所有的html标签都应该有一个id属性，用来唯一标识当前标签 为后续的DOM操作提供基础 也就意味着同一份html中标签的id不能重复，不写id属性也是可以的
补充: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 各部分之间用“/”符号隔开。各部分之间用“/”符号隔开。
<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表示在当前标签页中打开目标网页
标签分类
标签分类1:
双标签：h1-h6 p a
自闭和标签：img br hr
标签分类2:
块儿级标签：div h1-h6 p hr br
- 独占一行
- 块儿级标签能够嵌套块儿级标签和行内标签
- P标签虽然是块儿级标签但是它不能嵌套任何块儿级标签，块级儿标签能够设置长宽
行内标签：span a img i s b u
- 自身内容有多大就占多大
- 行内标签不能设置长宽
列表
无序列表
<ul type='disc'> <li>第一项</li> <li>第二项</li> </ul>type属性：
- disc 实心圆点，默认值
- circle 空心圆圈
- square 实心方块
- none 无样式
有序列表
<ol type='1' start='2'> <li>第一项</li> <li>第二项</li> </ol>type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- I 大写罗马
- i 小写罗马
标题列表
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格
<table border="1"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>ymg</td> <td rowspan="2">read</td> </tr> <tr> <td>2</td> <td>dsw</td> <td colspan="2">日天</td> </tr> </tbody> </table>属性：
- tr：一个tr表示一行
- border：调整列表的边框
- cellpadding：调单元格与外边框之间的距离(内边距)
- cellsapcing：调文本与单元格之间的距离(外边距)
- width：像素，百分比(最好通过css来设置长宽)
- rowspan：垂直方向合并
- colspan：单元格横跨多少列(水平方向合并)
from表单
- 功能：获取用户输入(手动输入/选择/默认值)，并将获取到的用户信息发送给后端
- form表单中只有input的type类型为submit才会触发提交信息的动作
- 如果不想通过input标签来触发提交动作，那么可以直接写一个button按钮()
1.form表单中的几个重要属性
action:用来控制数据到底提交给谁 写URL来指定提交给谁
form表单默认是get请求 可以通过method属性修改提交方式
form表单中需要给每一个获取用户输入的标签加上name属性，用来标识当前数据的类型 可以将name属性当做字典的key，用户输入的当做字典的value 并且可以手动设置value值
form表单发送文件 需要修改entype属性的值
- 默认是urlencoded不支持传输文件
- 需要将其修改为multipart/form-data
2.form表单元素
input
<·input> 元素会根据不同的type属性，变化为多种形态
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” /> 属性说明：
name:表单提交时的“键”，注意与id的区别
value:变淡提交时对应项的值
- type=“button”, “reset”, “submit”时，为按钮上显示的文本内容
- type=“text”,“password”,“hidden”时，为输入框的初始值
- type=“checkbox”, “radio”, “file”，为输入相关联的值
checked:radio和checkox默认被选中的乡
readonly:text和password设置只读
disabled:所有input均适用
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：定义提交时的选项值
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
label标签
<!--通常和input标签组合使用--> <form action=""> <lable for+'i1'>user_name:<input type='text' id="i1" name='username'></lable> <lable for='i2'>password:<input type='text' id="i2" name='password'></lable> </form>
<!--示例--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>用户注册</h3> <form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data"> <p>username:<input type="text" name="username" value="jason"></p> <p>password:<input type="password" name="password"></p> <p>birth:<input type="date" name="birthday"></p> <p>gender: 男<input type="radio" name="gender" value="0"> 女<input type="radio" name="gender" value="1" > 保密<input type="radio" name="gender" checked value="2"> </p> <p>hobby: <input type="checkbox" checked name="hobby" value="basketball">篮球 <input type="checkbox" checked name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="doublecolorball">双色球 </p> <p>province默认单选: <select name="province" id=""> <option value="beijin">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> </p> <p>province多选: <select name="" id="" multiple> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> </select> </p> <p>province1: <select name="" id=""> <optgroup label="北京"> <option value="">朝阳区</option> <option value="">海淀区</option> <option value="">昌平区</option> </optgroup> <optgroup label="上海"> <option value="">浦东新区</option> <option value="">静安区</option> <option value="">徐汇区</option> </optgroup> <optgroup label="深圳"> <option value="">南山区</option> <option value="">宝安区</option> <option value="">福田区</option> </optgroup> </select> </p> <p>info: <textarea name="info" id="" cols="30" rows="10"></textarea> </p> <p>file: <input type="file" name="file"> </p> <input type="submit" value="注册"> <input type="button" value="普通按钮"> <input type="reset" value="重置"> <button>button按钮</button> </form> </body> </html>
