1、HTML概念:
HTML全称为Hyper Text Markup Language,译为超文本标记语言。
2、idea创建前端项目:
1、创建前端项目
2、创建好之后在文件中新建一个html文件
3、在页面中进行代码编辑
3、HTML标签
文本标签
作用:对html文本内容进行格式设置,例如:设置段落、换行、加粗、设置颜色、斜体等等
和文本有关的标签
-
注释:--注释内容--
-
h1~h6:标题标签 h1~h6字体大小逐渐递减
-
p:段落标签
-
br:换行标签
-
hr:水平线标签
-
颜色属性:color color的值: 颜色的单词:red,green,blue rgb(值1,值2,值3):值得范围是0~255 #值1值2值3:值的范围是00~FF之间
-
宽度属性:width width得值: 数值:width='20',数值得单位默认为px 数值%:占比相对于父元素得比例
-
高度属性:size
-
对齐方式属性:align='center'/'left'/'right'
-
-
b:字体加粗
-
i:字体倾斜
-
font:字体标签
-
颜色属性:color
-
大小属性:size
-
字体属性:face
-
-
center:居中标签
图片标签
-
img:图片标签
-
作用:加载并展示页面图片资源
-
属性:
-
src : 指定图片的位置 相对路径:相对路径是指目标相对于当前文件的路径 ./:代表当前目录 ./可以省略 例如:./image/1.jpg 在当前目录下找到image目录,再找到1.jpg文件 ../ :表上一级目录 例如:../image/2.jpg 在上一级目录下找到image目录,再找到1.jpg文件 绝对路径:绝对路径是完整的描述文件位置的路径
1)以盘符为起点 2)网址
-
width:宽度属性
-
height:高度属性
-
alt:当图片非正常加载时的提示语句
-
列表标签
-
有序列表:ol li列表项1/li <li列表项2/li ... /ol
-
无序列表: ul li列表项1/li <li列表项2/li ... /ul
链接标签
-
超链接标签:a/a
-
属性:
-
href:指定访问资源的URL(统一资源定位符)
-
target:指定打开资源的方式 _self:默认值,在当前页面打开 _blank:在空白页面打开
-
块级、行级标签
-
div:每一个div占满一整行。块级标签
-
span:文本信息在一行展示,行内标签 内联标签
语义化标签
HTML5中增加了header和footer这两个语义标签。这两个标签为新标签。这使得我们进行布局语义更加的明显,便于代码的维护
-
header:页眉
-
footer:页脚
表格标签
-
table:表格标签
-
边框属性:border
-
宽度属性:width
-
边距属性:cellpadding
-
间距属性:cellspacing
-
背景颜色属性:bgcolor
-
对齐方式属性:align
-
-
tr:行标签
-
背景颜色属性:bgcolor
-
对齐方式属性:align
-
-
td:单元格标签
-
合并列属性:colspan
-
合并行属性:rowspan
-
-
表格的其他标签
-
th:定义表头单元格
-
caption:表格标题
-
thead:表示表格的头部份
-
tbody:表示表格的体部分
-
tfoot:表示表格的脚部分
-
4、HTML表单标签
表单概念
表单通常用于采集用户输入的数据,然后和服务器进行交互
form:用于定义表单的标签。可以定义一个范围,范围代表采集用户数据的范围
表单属性
-
action:指定提交数据的URL
-
method:指定提交方式
-
get: a)求参数会在地址栏中显示。会封装到请求行中。 b)请求参数大小是有限制的。 c)不太安全。
-
post: a)请求参数不会在地址栏中显示。会封装在请求体中。 b)请求参数的大小没有限制。 c)较为安全
-
-
name:表单项中的数据要想被提交:必须指定其name属性
-
value:表单项提交的值
表单项标签
可以输入内容或者选择内容的部分,大部分的输入项使用input type="输入项类型"/,在输入项里要有一个name属性
-
文本输入框:input type="text"/ 属性:placeholder 指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息
-
密码输入框:input type="password"/
-
单选框:input type="radio"/ 注意:
-
要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
-
一般会给每一个单选框提供value属性,指定其被选中后提交的值
-
checked属性,可以指定默认值
-
-
复选框:intput type="checkbox"/ 注意:
-
一般会给每一个单选框提供value属性,指定其被选中后提交的值
-
checked属性,可以指定默认值
-
-
文件选择框:input type="file"/
-
隐藏域:input type="hidden"/ 隐藏域,用于提交一些信息
-
提交按钮:input type="submit"/
-
普通按钮:input type="button"/
-
图片提交按钮:input type="image"/ 属性:src 指定图片的路径
-
下拉列表:select 子元素:option 指定列表项
-
本文域:textarea 属性:cols 指定列数,每一行有多少个字符 rows 默认多少行
-
指定输入项的文字描述信息:label label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
5、表单总结
<form>表单标签
属性:
action:表单提交的请求路径
method:表单提交方式
get提交
post提交
表单项
input
type:
text 文本框
password 密码框
date 日期框
radio 单选框
checkbox 多选框
file 文件上传框
submit 提交按钮
reset 重置按钮 恢复表单初始状态,不是清空表单
button 普通按钮 单独使用没有意义,需要结合JavaScript一起使用
hidden 隐藏域 页面不展示,但是会随着表单提交而提交数据
name: 表单提交的参数名称
value:表单提交的参数值
在radio和checkbox中必须设置value属性值
checked: 在radio单选按钮和复选框中,设置默认选中的属性
select 下拉列表 <select>
下拉选项:<option>
提交参数名:name 放到select标签中
提交的参数值:value 放到option标签中
selected 设置下拉选项默认选中的属性
textarea 文本域
name: 提交参数名称
cols:列
rows:行
textarea不是通过value提交表单数据。而是提交文本域中输入的内容
p6_day01_HTML总结