前端之HTML
一.HTML定义:
HTML超文本标记语言,是一种创建网页的语言,它不是一种编程语言,使用标签来描述网页
Web服务本质: 浏览器发请求-->HTTP协议-->服务端接受请求-->服务端返回响应-->服务端把HTML物件内容发给浏览器-->浏览器渲染页面
二.HTML标签的结构
HTML的结构
head-->给浏览器看的内容
title-->定义网页标题
style-->定义内部样式表(CSS样式)
link-->引入外部样式表文件CSS文件
script-->定义JS代码或引入外部JS文件
meta-->定义网页原信息
<meta charset="UTF-8">
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
body-->给用户看的
HTML标签的语法:
<head 属性1 =值1 属性2 = 值2></head>
<body></body>
<meta>
三.Body标签中的常用标签
1.常用标签的分类
块级元素与行内元素的区别:所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行
1>独占一行的(块级标签)
1.h1~h6 标题标签
2.p 段落标签
3.div 定义一个块级元素,并无实际意义
4.hr 一条单纯的横线
5.li 无序列表
6.tr
2>在一行显示的(行内标签/内联标签)
1.a 网址标签
2.span 定义内联(行内)元素,并无实际意义
3.img 引入图片
4.b / i / u / s 加粗/斜体/下划线/删除
2.标签的嵌套
标签可以嵌套标签
注意事项
1.尽量不要用内联标签包块级标签
2.p标签不能嵌套p标签
3.p标签不能嵌套div标签
3.获取用户输入的标签
1.form标签
一个容器,包住所有获取用户输入的标签
-action属性 规定向何处提交表格的地址
-method属性 规定在提交表格时所用的HTTP方法(默认:GET)
-enctype属性 规定被提交数据的编码(默认:url-encoded)
2.input标签
type
text --> 单行输入文本<input type=text" />
password --> 密码输入框<input type="password" />
date --> 日期输入框<input type="date" />
checkbox --> 复选框<input type="checkbox" checked="checked" />
radio --> 单选框<input type="radio" />
button --> 普通按钮 --> 通常用JS给它绑定事件<input type="button" value="普通按钮" />
submit --> 提交按钮 --> 默认将form表单的数据提交<input type="submit" value="提交" />
reset --> 重置按钮 ---> 将当前 form中的输入框都清空<input type="reset" value="重置" />
3.select标签
multiple:布尔属性,设置后为多选,否则默认单选
disabled:禁用
selected:默认选中该项
value:定义提交时的选项值
4.textarea标签(多行文本)
name: 名称
rows: 行数
cols: 列数
disabled: 禁用
5.form表单提交数据的注意事项
{'k1':'v1'}
1:form标签必须把获取用户输入的标签包起来
2.form不是from form标签必须有action属性和method
3.form中的获取用户输入的标签必须要有name属性