超文本标记语言(Hypertext Markup Language, HTML)
是一种用于创建网页的标记语言,不是一种编程语言,没有逻辑的
HTML基础文档结构
#声明为HTML5文档
#是文档的开始标记和结束的标记,lang设置浏览器语言
#定义了网页标题,在浏览器标题栏显示,charset声明编码,否则会出现乱码
网页标题 #定义了网页标题,在浏览器标题栏显示标签的语法
内容部分标签名>
定义网页标题定义内部样式表定义JS代码或引入外部JS文件引入外部样式表文件 定义网页原信息标签分类
块级标签(行级标签):
h1-h6, p, div, table, ol, ul, form,
内联标签(行内标签):
a, img, span, strong, select, input
基本标签(块级标签和内联标签)
不加标签的纯文字也是可以在body中写的加粗
斜体
下划线
删除
标题1
标题2
标题3
标题4
标题5
标题6
#就是单独个一个水平线
Meta标签两个属性分别是http-equiv属性和name属性
http-equiv属性:
#如果把URL和后面的内容去掉,就是2秒钟刷新一次,这些内容了解一下就行
#edge是微软的一个全新的浏览器,其实就是告诉IE浏览器
name属性: #关键字,也就是别人是可以通过这些关键字搜索到我的这个文章的,搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的#SEO就是做这个的
#是对这个文档的描述
a标签(超链接标签)
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序
href属性指定目标网页地址,该地址可以有几种类型
绝对URL- 指向另一个站点(href="http://www.jd.com)
相对URL - 指当前站点中确切的路径(href="index.htm")
锚URL- 指向页面中的锚(href="#top")
target:
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页顶点......回到顶部
#跳转一个新标签页
管理系统
#title 鼠标放上去之后显示出来的提示语(连接到图片)
连接到指定文件
img标签
src的路径又分为两种:网上的一个图片路径和本地的一个相对图片路径#本地图片
#网络图片
p段落标签:包裹的文字自成一个段落,此段落自带行间距
黄山落叶松叶落山黄
上海自来水来自海上
山西运煤车煤运西山div标签:除了换行什么都没有
span标签:无任何效果,一行输出
西湖垂柳丝柳锤西湖
黄山落叶松叶落山黄
table标签:自带换行
tr: 定义table标签里的一行
td: 定义tr标签里的一个单元格
border="1"给表格加边框
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
caption: 表格的标题
a | b | c | j | ||
d | e | f | h | m |
列表标签
ul无序列表
type属性:
disc (实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
ol有序列表
type属性: start是从数字几开始1数字列表,默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
dl标题列表(就像大纲一样,有一个层级效果)
通过dt定义一级元素
通过dd定义二级元素
- a
- b
- c
- d
- 标题1
- 内容1 标题2
- 内容2
form表单
功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等
表单还可以包含textarea、select、fieldset和 label标签
表单属性
属性描述
accept-charset
规定在被提交表单中使用的字符集(默认:页面字符集)。
action
规定向何处提交表单的地址(URL)(提交页面)。
autocomplete
规定浏览器应该自动完成表单(默认:开启)。
enctype
规定被提交数据的编码(默认:url-encoded)。
method
规定在提交表单时所用的 HTTP 方法(默认:GET)。
name
规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate
规定浏览器不验证表单。
target
规定 action 属性中地址的目标(默认:_self)
input
元素会根据不同的type属性,变化为多种形态
type属性值表现形式对应代码
text
单行输入文本
password
密码输入框(不显示明文)
date
日期输入框
checkbox
复选框
radio
单选框
submit
提交按钮
#发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
reset
重置按钮
#页面不会刷新,将所有输入的内容清空
button
普通按钮
hidden
隐藏输入框
file
文本选择框
(等学了form表单之后再学这个)
属性说明:
name:表单提交时的'键',注意和id的区别
value:表单提交时对应项的值
type="button", "reset", "submit"时,为按钮上显示的文本年内容
type="text","password","hidden"时,为输入框的初始值
type="checkbox", "radio", "file",为输入相关联的值
checked:radio和checkbox默认被选中的项
readonly:text和password设置只读
disabled:所有input均适用
select标签
属性说明:
multiple:布尔属性,设置后为多选下拉框,否则默认单选
disabled:禁用
selected:默认选中该项
value:定义提交时的选项值
label标签
定义:标签为 input 元素定义标注(标记),如果不用这个label给input标签一个标记,input会变黄,不影响使用,只是提示你,别忘了给用户一些提示,也就是这个label标签
说明:
label 元素不会向用户呈现任何特殊效果.但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容 标签的 for属性值应当与相关元素的 id 属性值相同。
extarea多行文本
属性说明:
name:名称
rows:行数#相当于文本框高度设置
cols:列数 #相当于文本框长度设置
disabled:禁用
用户名
密码
选项1
选项2
选项3
选项4
选项1选项2
选项1选项2选项3