虹口建设机械网站,新东方托福班价目表,纺织网站模板,网站内的地图导航怎么做目录
1.HTML结构
2. HTML常用标签
2.1 注释标签
2.2 标题标签#xff1a;h1~h6
2.3 段落标签#xff1a;p
2.4 换行标签#xff1a;br
2.5 格式化标签
2.6 图片标签#xff1a;img
2.7 超链接标签#xff1a;a
2.8 表格标签
2.9 列表标签
2.10 表单标签
2.10…目录
1.HTML结构
2. HTML常用标签
2.1 注释标签
2.2 标题标签h1~h6
2.3 段落标签p
2.4 换行标签br
2.5 格式化标签
2.6 图片标签img
2.7 超链接标签a
2.8 表格标签
2.9 列表标签
2.10 表单标签
2.10.1 input标签
2.10.2 下拉菜单标签select
2.10.3 多行编辑框标签textarea
2.11 无语义标签 1.HTML结构
HTML用于描述网页骨架是一个标签化语言
如以下hello world程序
htmlhead/headbody hello world/body
/html
1HTML代码是通过标签来组织的 形如html / html等即为标签(tag)或称元素(element)
2一个标签通常是成对出现的 html是开始标签/ html是结束标签两标签之间是标签内容
3标签可以嵌套一个标签的内容可以是其他一个或多个标签 此时这些标签构成了一个“树形结构”
4可以在开始标签中给标签赋予属性(Attribute) 属性相当于键值对可以有一个或多个
2. HTML常用标签
1. html标签
html标签是一个html文件最顶层的标签相当于树根结点
2. head标签
存放该页面的属性元数据meta data
3. body标签
存放该页面包含的内容
注emmet快捷键功能主流开发工具均支持
输入! Tab键即可生成一个基本页面只需要编辑body内容即可
!DOCTYPE html !--声明文件类型是html文件--
html langen !--lang即languageen即english表示网页语言为英文--
head!--meta标签为单标签--meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title !--表示网页标题网页标签页显示内容--
/head
bodyhello world
/body
/html
2.1 注释标签
!-- --
注1同其他语言一样注释的内容不会在页面中显示。但右键查看网页源代码时是可以看到注释的
2Ctrl/ 可以快速进行注释或取消注释
2.2 标题标签h1~h6
从h1~h6数字越大则字体越大示例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6
/body
/html
根据目录打开文件 注1.在HTML中每个标题标签都独占一行这与代码的编写方式是无关的
2. 在HTML源代码中写的换行会被忽略当写空格时有时会被忽略有时多个空格会被视为一个空格
2.3 段落标签p
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!/pp这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!/pp这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!/pp这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!/p/body
/html根据目录打开文件 注1. loremTab键可自动生成一段随机文本帮助调试显示效果
2. 每个段落之间不只是要换行还有一个明显的段落间距
2.4 换行标签br
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. br brSaepe nemo ex eligendi mollitia earum quisquam, rem quasi quaerat nihil, error, incidunt inventore deserunt ad quibusdam? Voluptas sint earum quasi ipsam!/p/body
/html
根据目录打开文件 注1. br是一个单标签
2.5 格式化标签
1加粗strong标签和b标签
2倾斜em标签和i标签
3删除线del标签和s标签
4下划线ins标签和u标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodystrong变粗标签strong/strongb变粗标签b/bbrem倾斜标签em/emi倾斜标签i/ibrdel倾斜标签del/dels倾斜标签s/sbrins下划线标签ins/insu下划线标签u/u/body
/html
根据目录打开文件 2.6 图片标签img
1. 核心属性src为必填项
src描述了该图片的路径可以是本地绝对路径也可以是相对路径或是网络路径
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg srcd:/2.jpg img src./2.jpg img src2.jpg /body
/html
注1相对路径一定要明确工作目录HTML的工作目录就是该HTML文件所在的目录
此时若创建新目录image并将2.jpg移入image目录下再使用相对路径直接打开2.jpg就无法在网页中正常显示图片
img src2.jpg 此时需注明image目录即可正常显示图片
img srcimage/2.jpg ./ 表示当前路径../ 表示当前路径的上一级路径
2也可以不使用本地照片使用网络图片链接也可以在网页中打开图片如
img srchttps://c-ssl.duitang.com/uploads/blog/202107/04/20210704175902_89460.thumb.1000_0.jpeg
2. alt属性当图片正常显示时该属性不作显示假如图片无法显示就会显示alt对应文本
在当前HTML文件所在目录下无3.jpg图片此时若试打开该图片则
img src3.jpg altLoading fail! 3. title属性鼠标悬停在图片上并给出提示 4.width / height属性描述图片大小
注1. 当只设置width和height属性中的一个时图片会根据已设置的图片大小进行等比缩放
2. px是像素是前端开发中最常用的单位
2.7 超链接标签a
链接(link)即快捷方式超链接即链接跳转的页面可以是当前网站之外的
1. 属性1href为必填项表示点击后会跳转哪个页面 a hrefhttps://www.sogou.com搜狗/aa hrefhttps://www.baidu.com百度/a
根据目录打开文件 2. 属性2 target属性一般写为target_blank就可打开一个新的标签页而不替换原有界面 a hrefhttps://www.sogou.com target_blank搜狗/aa hrefhttps://www.baidu.com target_blank百度/a
2.8 表格标签
1. table表示整个表格
2. tr表示一行
3. td表示一个单元格
4. th表示表头中的一个单元格文字加粗 tabletrthName/ththTelephone/th/trtrtdMike/tdtd112233/td/trtrtdMary/tdtd445566/td/trtrtdJohn/tdtd778899/td/tr/table
根据目录打开文件 注1. 上述运行结果并不是一个常见的表格形式table标签还有一些可以修饰界面的属性如宽width高height边框border将整体边框与单元格边框合二为一cellspacing等等 table width500px height300px border1px cellspacing0trthName/ththTelephone/th/trtrtdMike/tdtd112233/td/trtrtdMary/tdtd445566/td/trtrtdJohn/tdtd778899/td/tr/table
此时界面为 2. 要想实现单元格内数据与表头对齐需要使用css此处仅作简单展示 styletd{text-align: center;/* 令td标签中的文字都居中 */}/style
在head标签间插入以上代码即可实现数据居中 2.9 列表标签
1. 有序列表ol (ordered list)排名分先后
2. 无序列表ul (unordered list)排名不分先后
3. 列表项li (list item) !-- 有序列表 --h3Java 001/h3olliMike/liliMary/liliJohn/liliAlice/li/ol!-- 无序列表 --ulliMike/liliMary/liliJohn/liliAlice/li/ul
根据目录打开文件 2.10 表单标签
表单是让用户输入信息的重要途径分为两个部分
1表单域包含表单元素的区域重点是form标签
使用form进行前后端交互即把页面上用户进行的操作或输入提交到服务器上
2表单控件输入框、提交按钮等重点是input标签
input标签有很多形态能够表现成各种用户用来输入的标签
2.10.1 input标签 1. 单行文本框如 brinput typetext br2. 单行文本框输入密码专用即输入不可视如brinput typepassword br3. 单选按钮如br请选择性别 input typeradio namegender 男input typeradio namegender checkedchecked 女br4. 复选框如br请选择科目input typecheckbox计算机组成原理input typecheckbox计算机网络input typecheckbox checkedchecked数据结构br5. 按钮如brinput typebutton value提交
根据目录打开文件 注1. type的值为password时表示输入内容不可视type值为text时表示普通单行文本输入框
2. 实现单选按钮需要指定name属性的值相同即可实现单选
3. 单选框和复选框都可增加checked属性值为checked表示默认选择
4. button属性可与value属性搭配使用value属性的值表示按钮框上显示的内容
5. html功能有限更复杂的逻辑与功能如限制最多选择个数点击按钮后实际进行的操作等都需要搭配js实现
6. 提交按钮搭配form使用typesubmit可以触发form与服务器的交互
7. 文件选择框 文件选择框brinput typefile 2.10.2 下拉菜单标签select selectoption北京/optionoption上海/optionoption深圳/optionoption广州/optionoption杭州/option/select 2.10.3 多行编辑框标签textarea textarea id cols30 rows10abcdefghigklmn/textarea 注input标签、select标签、textarea标签等都可称为控件是构成一个图形化界面的基本要素
2.11 无语义标签
无语义即表示可以用在各种场景
1. div默认独占一行也称为块级元素
2. span默认是不独占一行的称为行内元素
