#html5前端总结

146 阅读4分钟

html基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>


第一行是浏览器解析我们代码的标准,同时也是根元素
第二行是网页语言的意思
第三行 制定我们网页的编码,防止乱码
第四行是我们网页的网页名字

网页

网页和网站的关系;一个网站可以一多个网页
网页是代码通过浏览器内核处理后·显示的

hmlt基本标签类型

标签分为 行标签 块标签 和行内块标签
行标签(可以并排显示,不可以设置宽高):
块标签(不可以并排显示,独立一行,可以设置宽高)
行内块标签(可以并排显示,同时也可以设置宽高)
单标签  双标签

基本标签

tml:意思是超文本标签语言

eading(h1~h6):是头部的意思,通常做标题用,自带加粗,依次递减
p:段落标签,在文章里用来分段,多个个p标签之间有间隙
br:换行标签,
hr;水平线标签,在页面中显示一条水平线
img src =“”alt:图片标签在属性值里放入图片链接跳转,如果图片加载失败显示alt里面的内容
##html
意思是超文本标签语言
#网页(web)
网页和网站的关系;一个网站可以一多个网页
网页是代码通过浏览器内核处理后·显示的
##html基本框架
```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
-第一行是浏览器解析我们代码的标准,同时也是根元素
-第二行是网页语言的意思
-第三行 制定我们网页的编码,防止乱码
-第四行是我们网页的网页名字

hmlt基本标签类型

标签分为 行标签 块标签 和行内块标签
行标签(可以并排显示,不可以设置宽高):
块标签(不可以并排显示,独立一行,可以设置宽高)
行内块标签(可以并排显示,同时也可以设置宽高)
单标签  双标签

基本标签

heading(h1~h6):是头部的意思,通常做标题用,自带加粗,依次递减
p:段落标签,在文章里用来分段,多个个p标签之间有间隙
br:换行标签,
hr;水平线标签,在页面中显示一条水平线
div:布局标签 可以把网页分成多分,配合css就可以完成布局
<a href=""></a>:超链接,用来跳转链接
<!--img src用来写图片的路径 abt当图片加载不出来显示的内容
division:分开、分配的意思
span:跨域、涵盖的意思
<!--img src=“” abt"">:图片标签,用来在网页里显示图片

元素的含义

  • HHHIHH.png

表格

-table :表格的意思   
-tr:是行的意思   
-td:数据单元格 
-cellpadding:内边距
-border=1:边框
-align=center :居中 right 居右
-caption :表格名  
-bgcolor :背景颜色    
-width=:设置宽度
-rowspan=:"合并单元行"  
-colspan=:"合并列 "
-border-collapse: collapse;:边框合并
-color::设置字体颜色   
-caption:表格名

列表

无序列表ul li列
有序列表ol li列
自定义列表dl 
dt自定义列表标题
dd自定义列表内容
tyep去圆点  
circle 空心圆
square 方块
disc 实心圆 

表格

table 表格的意思   
tr是行的意思   
td数据单元格 
cellpadding=内边距
border=1边框
align=center 居中 right 居右
caption 表格名  
bgcolor 背景颜色    
width=设置宽度
rowspan="合并单元行"  
colspan="合并列 "
border-collapse: collapse;边框合并
color:设置字体颜色   
caption表格名

表单

form:表单
input 表单控件 type=控件属性
action 数据网站地址提交  
fule 提交文件
text 表示文本输入框 明文
password 密文输入
placeholder=提示用户输入
value="" 按钮 = 后面写的可以显示在上面 
radio 单选框(加name=xxx 多选一)
name=nickname(名称) 给value起名给后台)
checkbox 多选框
checked="checked"默认选中
readonly=#只读
disabled=禁用#
multiple=#选多个  true真  false假
focus获取焦点
button 普通按钮 在谷歌可以提交,其他的不可以 
reset 重置输入的内容
submit 一个具有提交功能的按钮 如果不写value 默认是 提交
select下拉框整体  option下拉框每项 
file 上传文件 -->
method=get把数据个服务器的方法  
type没有的值 默认为text
<laberl>获取焦点