猪八戒建站服务,外贸网店怎么开店,设计网站名字,设计网站推荐p目录
1 - HTML常见标签
1.1 - 表格标签
1.1.1 - 基本使用
1.1.2 - 合并单元格
1.2 - 列表标签
1.3 - 表单标签
1.3.1 - form标签
1.3.2 - input标签
1.4 - label标签
1.5 - select标签
1.6 - textarea标签
1.7 - …目录
1 - HTML常见标签
1.1 - 表格标签
1.1.1 - 基本使用
1.1.2 - 合并单元格
1.2 - 列表标签
1.3 - 表单标签
1.3.1 - form标签
1.3.2 - input标签
1.4 - label标签
1.5 - select标签
1.6 - textarea标签
1.7 - 无语义标签div span
2 - Emmet快捷键
3 - HTML特殊字符
4 - 小结 1 - HTML常见标签
1.1 - 表格标签
1.1.1 - 基本使用
table标签表示整个表格。tr标签表示表格的一行。td标签表示一个单元格。th标签表示表头单元格。会居中加粗。thead标签表格的头部区域(注意和th标签区分范围比th标签要大)。tbody标签表格得到主体区域。
table标签包含tr标签tr标签包含td标签或者th标签。
表格标签有一些属性可以用于设置大小边框等。但是一般使用CSS方式来设置。
这些属性都要放到table标签中。
align是表格相对于周围元素的对齐方式。aligncenter (不是内部元素的对齐方式)。border表示边框。1表示有边框(数字越大边框越粗) 表示没边框。cellpadding表示内容距离边框的距离默认1像素。cellspacing表示单元格之间的距离。默认为2像素。width/height设置尺寸。
注意这几个属性在vscode都提示不出来。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable aligncenter border1 cellpadding20 cellspacing0 width500height500trtd姓名/tdtd性别/tdtd年龄/td/trtrtd枫叶丹1/tdtd男/tdtd21/td/trtrtd枫叶丹2/tdtd男/tdtd21/td/tr/table/body
/html
结果展示 1.1.2 - 合并单元格
跨行合并rowspann。跨列合并colspann。
步骤
先确定跨行还是跨列。找好目标单元格(跨列合并左侧是目标单元格跨行合并上方是目标单元格)。删除的多余的单元格。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable aligncenter border10 cellpadding20 cellspacing0 width500
height500trtd姓名/tdtd性别/tdtd年龄/td/trtrtd枫叶丹1/tdtd colspan2男/td/trtrtd枫叶丹2/tdtd男/tdtd21/td/tr/table/body
/html
结果展示 1.2 - 列表标签
主要使用来布局的。整齐好看。
无序列表(重要) ul标签、li标签。有序列表(用的不多) ol标签、li标签。自定义列表(重要) dl总标签、dt小标题、dd围绕标题来说明上面有个小标题。
注意
元素之间是并列关系。ul标签/ol标签中只能放li标签不能放其他标签dl标签中只能放dt标签和dd标签。li标签中可以放其他标签。列表带有自己的样式可以使用CSS来修改。(例如前面的小圆点都会去掉)。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh3无序列表/h3ulli王路飞/lili刘索隆/lili山治君/li/ulh3有序列表/h3olli王路飞/lili刘索隆/lili山治君/li/olh3自定义列表/h3dldtOne Piece/dtdd王路飞/dddd刘索隆/dddd山治君/dd/dl/body
/html
结果展示 1.3 - 表单标签
表单是让用户输入信息的重要途径。
分成两个部分
表单域包含表单元素的区域。重点是form标签。表单控件输入框提交按钮等。重点是input标签。
1.3.1 - form标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyform actiontest.html... [form 的内容]/form/body
/html
描述了要把数据按照什么方式提交到哪个页面中。(关于form标签需要结合服务器网络编程来进一步理解。)
1.3.2 - input标签
各种输入控件单行文本框按钮单选框复选框。
type(必须有)取值种类很多button、checkbox、text、file、image、password和radio等。name给input标签起了个名字。尤其是对于单选按钮具有相同的name才能多选一。valueinput标签中的默认值。checked默认被选中。(用于单选按钮和多选按钮)。maxlength设定最大长度。
1. 文本框
input typetext2. 密码框
input typepassword3. 单选框
性别:
input typeradio namesex男
input typeradio namesex checkedchecked女
注意
单选框之间必须具备相同的name属性才能实现多选一的效果。
4. 复选框
爱好:
input typecheckbox 吃饭 input typecheckbox 睡觉 input typecheckbox
打游戏
5. 普通按钮
input typebutton value我是个按钮
当前点击了没有反应。需要搭配JS使用。
input typebutton value我是个按钮 onclickalert(hello)
6. 提交按钮
form actiontest.htmlinput typetext nameusernameinput typesubmit value提交
/form
提交按钮必须放到form标签内。点击后就会尝试给服务器发送。
7. 清空按钮
form actiontest.htmlinput typetext nameusernameinput typesubmit value提交input typereset value清空
/form
清空按钮必须放在form标签中。点击后会将form标签内所有的用户输入内容重置。
8. 选择文件
input typefile
点击选择文件会弹出对话框选择文件。 1.4 - label标签
搭配input标签使用。点击label标签也能选中对应的单选/复选框能够提升用户体验。
for属性:指定当前label标签和哪个相同id标签的input标签对应。(此时点击才是有用的)。
label formale男/label input idmale typeradio namesex
1.5 - select标签
下拉菜单
option中定义selectedselected 表示默认选中。
selectoption北京/optionoption selectedselected上海/option
/select
注意可以给第一个选项作为默认选项。
selectoption--请选择年份--/optionoption2024/optionoption2025/optionoption2026/optionoption2027/optionoption2028/option
/select
1.6 - textarea标签
textarea rows3 cols50/textarea
文本域中的内容就是默认内容。
注意空格也会有影响。
rows和cols也都不会直接使用都是用CSS来改的。
1.7 - 无语义标签div span
div标签division的缩写含义是分割。
span标签含义是跨度。
就是两个盒子用于网页布局。
div标签独占一行是一个大盒子。span标签不独占一行是一个小盒子。
divspan王路飞/spanspan王路飞/spanspan王路飞/span
/div
divspan刘索隆/spanspan刘索隆/spanspan刘索隆/span
/div
divspan山治君/spanspan山治君/spanspan山治君/span
/div
2 - Emmet快捷键
1. 快速输入标签 input [tab] 2. 快速输入多个标签 div*3 [tab] 3. 标签带id div#sex [tab] 4. 标签带类名 div.sex [tab] 5. 标签带子元素 ulli*3 [tab] 6. 标签带兄弟元素 spanspan 7. 标签带内容 div{hello} 8. 标签带内容(带编号) div{$.hello} 除此之外还有很多。
3 - HTML特殊字符
有些特殊的字符在html文件中是不能直接表示的例如
空格nbsp小于号lt大于号gt按位与amp
html标签就是用表示的。因此内容里如果存在就会发生混淆。
参考内容
HTML特殊字符编码对照表
4 - 小结
HTML只是描述了页面的骨架结构。
使用CSS可以针对页面进行进一步美化。 感谢各位大佬支持
互三啦
