新手搭建网站教程,品牌推广费用预算,企业营销型网站类型,网站开发用例图目录
注释标签
标题标签 h1-h6
段落标签
换行标签
格式化标签 加粗#xff1a;strong 标签和 b 标签 倾斜#xff1a;em 标签和 i 标签 删除线#xff1a; del 标签 和 s 标签 下划线#xff1a;ins 标签 和 u 标签
图片标签#xff1a;img 单标签
src属性#…目录
注释标签
标题标签 h1-h6
段落标签
换行标签
格式化标签 加粗strong 标签和 b 标签 倾斜em 标签和 i 标签 删除线 del 标签 和 s 标签 下划线ins 标签 和 u 标签
图片标签img 单标签
src属性
alt属性
title属性
width属性
height属性
border属性
超链接标签a标签
href属性
target属性
表格标签
单元格合并
列表标签
无序列表
有序列表
自定义列表
表单标签
表单域
表单空间
1文本框
2密码框
3单选框
4复选框
5普通按钮
6提交按钮
7重置按钮
8选择文件
label标签
select标签
textarea标签
无语义标签
HTML中常用特殊字符 注释标签 ctrl/ 将当前行注释效果如下
!DOCTYPE html
html langen
head/head
body!-- 这是一个注释 --
/body
/html PS:要看注释掉的信息F12显示代码
标题标签 h1-h6
有六个从h1-h6数字越大字体越小
h1hello/h1
h2hello/h2
h3hello/h3
h4hello/h4
h5hello/h5
h6hello/h6
效果如下各个标签之间的间隙是浏览器默认的css样式可更改 段落标签
p /p
!DOCTYPE html
html langenheadtitle测试页面/title/headbodyp这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段/pp这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段/p/body
/html 换行标签
br/
!DOCTYPE html
html langenheadtitle测试页面/title/headbodyp这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段这是第一段/pp这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段换行处br这是第二段这是第二段这是第二段这是第二段这是第二段这是第二段这是第二这是第二段这是第二段这是第二段/p/body
/html 格式化标签 加粗strong 标签和 b 标签 倾斜em 标签和 i 标签 删除线 del 标签 和 s 标签 下划线ins 标签 和 u 标签
!DOCTYPE html
html langenheadtitle测试页面/title/headbody!-- 加粗 --pstrong 加粗 strong标签 /strong/ppb 加粗 b标签 /b/p!-- 倾斜 --pem 倾斜 em标签/em/ppi 倾斜 i标签/i/p!-- 删除线 --pdel 删除线 del标签/del/pps 删除线 s标签/s/p!-- 下划线 --pins 下划线 ins标签/ins/ppins 下划线 u标签/ins/p/body
/html PS:虽说每种效果的两种标签效果一样但是前者是带强调的意思。 图片标签img 单标签
src属性 img标签必须带有src属性指定图片的路径
img srcrose.jpg
此时要把rose.jpg这个图片放到和html同级的目录下
alt属性 替换文本当前图片不能正确显示的时候会显示一个替换的文字。如果图片加载成功则不显示。
title属性 提示文本鼠标放到图片上就会有提示
width属性 图片的宽度px单位 像素
height属性 图片的高度
border属性 给图片加边框
超链接标签a标签
href属性
必须具备表示点击后跳转到哪个页面
!DOCTYPE html
html langenheadtitle测试页面/title/headbodya hrefhttps://www.baidu.com跳转页面/a/body
/html
href#表示不做任何跳转停留在当前页面
a href#刷新/a
要用图片进行超链接跳转可在a标签里添加img标签示例
a hrefhttps://www.baidu.comimg stc./test.png alt图片加载失败
/a
target属性
打开方式默认是_self如果是_blank则用新的标签页打开。
a hrefhttps://www.baidu.com target_blankimg stc./test.png alt图片加载失败
/a
表格标签
table/table
table标签表示整个表格
tr表示表格的一行
td表示表格的一个单元格
th表示表头单元格会居中加粗
thead表格的头部区域注意和th区分范围是比th要大的
tbody表格得到的主体区域
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable border1px width500px height300px cellspacing0 cellpadding50 aligncenter!-- tr/tr表示一行 --!-- 复制快捷键 shiftalt方向键的下 --threadtrth姓名/thth性别/thth年龄/th/tr/threadtbodytr!-- td/td表示单元格 --td张三/tdtd男/tdtd3/td/trtrtd李四/tdtd男/tdtd4/td/trtrtd王五/tdtd女/tdtd5/td/tr/tbody/table
/body
/html 单元格合并
合并行 rowspan合并的行数
合并列 colspan合并的列数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable border1px width500px height300px cellspacing0 cellpadding50 aligncenterthreadtrth姓名/thth性别/thth年龄/th/tr/threadtbodytrtd张三/td!-- 行合并 --td rowspan2男/tdtd3/td/trtrtd李四/tdtd4/td/trtr!-- 列合并 --td colspan2王五/tdtd5/td/tr/tbody/table
/body
/html 列表标签
无序列表
ul 、li
ul中的 types属性 改变列前面的符号有以下三种取值
disc(默认) square circle PS:快捷键 ”ulli*3回车” 在ul下面写3个li“ 在ul下面写3个li
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1这是无序列表/h1!-- ulli*3回车 在ul下面写3个li --ul typecircleli内容1/lili内容2/lili内容3/li/ul
/body
/html
有序列表
ol 、li
ol中的 types属性 改变列前面的编号符号有以下五种取值
a //小写英文字母编号A //大写英文字母编号i //表示小写罗马数字编号I //表示大写罗马数字编号1 //数字编号(默认)
ol 的start属性更改编号的起始值
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1这是有序列表/h1!-- olli*4回车 在ul下面写4个li --ol typea start2li这是有序列表1/lili这是有序列表2/lili这是有序列表3/lili这是有序列表4/li/ol
/body
/html
自定义列表
dl 、dt 、dd
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1这是自定义列表/h1!-- dldtdd*3回车 --dldt 自定义列表显示内容 dd自定义列表内容1/dddd自定义列表内容2/dddd自定义列表内容3/dd/dt/dl/body
/html 表单标签 用表单标签来完成服务器的一次交互 分为两个部分
表单域包含表单元素的区域重点是form标签表单控件输入框提交按钮等重点是input标签
表单域
bodyform action服务器的地址/form
/body
表单空间
可以通过对type进行对应的取值控制input的类型
1文本框
bodyform action服务器的地址姓名input typetext/form
/body 2密码框
bodyform action服务器的地址姓名input typetextbr密码input typepassword/form
/body 3单选框
input 的type 属性为radio时为单选框使用name实现只能勾选一个的功能checkedtrue 表示默认是勾选的。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform action服务器的地址姓名input typetextbr密码input typepasswordbr性别input typeradio namegender checkedtrue男input typeradio namegender女/form
/body
/html
4复选框
input 的 type 属性为 checkbox 时
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform action服务器的地址爱好input typecheckbox吃饭input typecheckbox睡觉input typecheckbox玩游戏/form
/body
/html 5普通按钮
input 的 type 属性为 botton 时,value设置按钮显示的文字点击按钮要触发的事件通过gs设置
这里举例弹出hello
form action服务器的地址input typebutton value这是一个普通按钮 onclickalert(hello)
/form 6提交按钮
一般将数据提交到服务器上
input 的 type 属性为 submit 单击提交按钮后会自动清空文本框中的数据
form action服务器的地址姓名input typetextinput typesubmit
/form
7重置按钮
重置文本框、单选框、复选框
input typereset
8选择文件
input typefile
label标签
一般和单选框配合使用实现单击文字也可勾选单选框的功能
label formale男/label
input typeradio namesex idmalelabel forfemale女/label
input typeradio namesex idfemale select标签
一般和option配合使用下拉框效果默认显示第一个option的文字可以通过设置selected属性修改默认显示。
form action服务器的地址select name idoption value--请选择年份--/optionoption value selectedselected--2002--/optionoption value--2003--/optionoption value--2004--/option/select
/form textarea标签
row属性 设置超过多少行时出现滚轮
textarea name id cols30 row4/textarea 无语义标签
没有固定的用途可以拿着这个标签啥都可以干 div 是独占一行的是一个大盒子 span 是不独占一行的是一个小盒子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyform action服务器的地址divspan吃饭/spanspan睡觉/spanspan玩游戏/span/divdiv吃饭/divdiv睡觉/divdiv玩游戏/div/form
/body
/html HTML中常用特殊字符
空格 nbsp;
小于号lt;
大于号gt;
按位与amp
