做网站需要的硬件,湛江网站seo推广,怎么制作简历电子版,wordpress模板主题介绍JavaWeb
HTML
超文本标记语言
超文本#xff1a;文本、声音、图片、视频、表格、连接标记#xff1a;有许许多多的标签组成
vscode开发工具搭建
因为我使用的IDEA是社区版#xff0c;代码高亮补全缩进都有些问题#xff0c;使用vscode是最好的选择~
安装
Visual Stu…JavaWeb
HTML
超文本标记语言
超文本文本、声音、图片、视频、表格、连接标记有许许多多的标签组成
vscode开发工具搭建
因为我使用的IDEA是社区版代码高亮补全缩进都有些问题使用vscode是最好的选择~
安装
Visual Studio Code - Code Editing. Redefined 下载完毕后一路next即可完成安装~
插件推荐 编写第一个html页面
记事本编写代码效果在浏览器上直接显示hello world 以上写法当然不标准
htmlheadtitle这是页面标题/title/headbodyhello world/body
/htmlhtmlhtml文件根标签 head编写相关页面的相关属性 title页面标题 body页面内容展示信息
DOM树
所有的标签都是html的子标签
head和body是兄弟标签
head和title是下兄弟标签 双标签有始有终
单标签 快速生成代码框架 enter
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/htmlhtml标签
注释标签
!--标题标签
h1-h6
段落标签
p/p换行标签
br/换行后的间隙比段落的小
格式化标签
加粗strong 、b
倾斜em、i
删除线del、s
下划线ins、u
img标签
src属性
img标签必须搭配src使用图片路径
相对路径
./xxx.png
./img/xxx.png
../xxx.png 上一层路径绝对路径
图片路径
网络上的图片资源
其他属性 alt替换文本 当图片加载失败就会出现替换文本 title提示文本 鼠标放在图片上就会出现文本 width/height 调整大小 border 边框
a标签超链接
href
点击后就跳到哪个页面图片也可以
target
默认是_self,跳转新页面覆盖原页面
_blank打开新页面且跳转
表格标签
table标签
表示整个表格
tr
表示表格一行
td
表示一个单元格
th
表示表头单元铬居中加粗
thead
表格的头部区域范围比th大
tbody
表格得到主体区域 表格标签有一些属性可以用于设置大小边框等.但是一般使用CSS方式来设置 这些属性都要放到table标签中
align是表格相对于周围元素的对济方式.a1igncenter(不是内部元素的对齐方式)border表示边框.1表示有边框数字越大边框越粗表示没边框cellpadding:内容距离边框的距离默认1像素cellspacing:单元格之间的距离.默认为2像素width/height:设置尺寸
使用
表格头部表格主体单元格合并 thead里的内容居中加粗 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500 height300 cellspacing0 cellpadding50 aligncentertheadtrth姓名/thth性别/thth年龄/th/tr/theadtrtd姓名/tdtd性别/tdtd年龄/td/trtrtd张三/tdtd男/tdtd3/td/trtrtd李四/tdtd男/tdtd4/td/trtrtd李四/tdtd女/tdtd5/td/tr/table
/body/htmlrowspan、colspan
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytable border1 width500 height300 cellspacing0 cellpadding50 aligncentertheadtrth姓名/thth性别/thth年龄/th/tr/thead!-- trtd姓名/tdtd性别/tdtd年龄/td/tr --trtd张三/tdtd rowspan2男/tdtd3/td/trtrtd李四/td!-- td男/td --td4/td/trtrtd colspan2李四/女/td!-- td女/td --td5/td/tr/table
/body/html列表标签
无序列表
ul、li
disc浏览器默认展示方式square方块circle空心圆
有序列表
ol、li
通过type控制序号的样式 start从哪个序号开始
dl、dt、dd
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1这是无序列表/h1ulli这是内容1/lili这是内容2/lili这是内容3/li/ulh1这是有序列表/h1ol typeA start3li这是有序列表1/lili这是有序列表2/lili这是有序列表3/lili这是有序列表4/li/olh1这是自定义列表/h1dldt自定义列表显示内容dd这是自定义列表1/dddd这是自定义列表2/dddd这是自定义列表3/dddd这是自定义列表4/dd/dt/dl
/body
/html表单标签
完成服务器的一次交互
表单域
form
form actiontest.html... [form 的内容]
/form关于 form 需要结合 服务器 网络编程 来进一步理解. 后面再详细研究.
表单控件
input
各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
通过type的取值来控制input的类型 文本框 input typetext密码框 input typepassword单选框 input typeradio namesex男
input typeradio namesex checkedchecked女
注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果复选框 爱好:
input typecheckbox 吃饭 input typecheckbox 睡觉 input typecheckbox打游戏普通按钮 input typebutton value我是个按钮
当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究)input typebutton value我是个按钮 onclickalert(hello)提交按钮 form actiontest.htmlinput typetext nameusernameinput typesubmit value提交
/form提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送 清空按钮 form actiontest.htmlinput typetext nameusernameinput typesubmit value提交input typereset value清空
/fo清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置. 选择文件 input typefile点击选择文件, 会弹出对话框, 选择文件.
lable标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
for 属性 : 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
label formale男/label input idmale typeradio namesexselect标签
下拉菜单
selectoption--请选择年份--/optionoption1991/optionoption1992/optionoption1993/optionoption1994/optionoption1995/option
/select无语义标签
没有固定的用途
div
独占一行是一个大盒子
span
不独占一行是一个小盒子
案例练习
个人简历 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyh1蔡徐坤/h1divh2基本信息/h2img src./ikun.png alt width500 height350spanp求职意向篮球开发/p/spanspanp联系电话1008611/p/spanspanp个人邮箱niganma_aiyou.com/p/spanspanpa hrefhttps://gitee.com/jyutao/厉不厉害你坤哥的Gitee/a/p/spanspanpa hrefhttps://blog.csdn.net/weixin_45646601/坤哥的博客/a/p/span/divdivh2教育背景/h2olli1990 - 1996 幼黑子幼儿园 幼儿园/lili1996 - 2002 小黑子小学 小学/lili2002 - 2005 中黑子中学 初中/lili2005 - 2008 高黑子中学 高中/lili2008 - 2012 偶像练习生大学 唱跳rap专业 坤科/li/ol/divdivh2专业技能/h2ullirap 基础语法扎实已经刷了 800 道 律师函/lili常见篮球都可以独立实现并熟练应用/lili熟知跳舞理论并且可以金鸡独立/lili掌握 唱歌 能力并且独立开发了再看一眼就会爆炸。/li/ul/divdivh2个人项目/h2ollih3打胎/h3p开发时间2021年-2023年被发现/pp功能介绍/pulli触发被动律师函/lili隐藏技能睡未成年/li/ul/lilih3美国孝队/h3p开发时间年被发现/pp功能介绍/pulli三分线起跳螺旋扣篮/lili触发被动律师函/li/ul/li/ol/divdivh2个人评价/h2p全民制作人大家好我是练习时长两年半的个人练习生蔡徐坤。喜欢唱、跳、rap、篮球。/p/div
/body/html填写信息 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodytabletheadh3请填写简历信息/h3/theadtrtdlabel forname姓名/label/tdtdinput typetext name idname/td/trtrtd性别/tdtdinput typeradio namesex idfemale checkedcheckedlabel forfemaleimg src./女.png alt width20 height20女/labelinput typeradio namesex idmalelabel formaleimg src./男.png alt width20 height20男/label/td/trtrtd出生日期/tdtdselect name idoption value--请选择年份--/optionoption value2000/optionoption value2001/optionoption value2002/optionoption value2003/optionoption value2004/option/selectselect name idoption value--请选择月份--/optionoption value1/optionoption value2/optionoption value3/optionoption value4/optionoption value5/optionoption value6/optionoption value7/optionoption value8/optionoption value9/optionoption value10/optionoption value11/optionoption value12/option/selectselect name idoption value--请选择日期--/optionoption value2/optionoption value3/optionoption value4/optionoption value5/optionoption value6/optionoption value7/optionoption value8/optionoption value9/optionoption value10/optionoption value11/optionoption value12/optionoption value13/optionoption value14/optionoption value15/optionoption value16/optionoption value17/optionoption value18/optionoption value19/optionoption value20/optionoption value21/optionoption value22/optionoption value23/optionoption value24/optionoption value25/optionoption value26/optionoption value27/optionoption value28/optionoption value29/optionoption value30/option/select/td/trtrtdlabel forschool就读学校/label/tdtdinput typetext name idschool/td/trtrtd应聘岗位/tdtdinput typecheckbox name idserverlabel forserver后端开发/labelinput typecheckbox name idfelabel forfe前端开发/labelinput typecheckbox name idtestlabel fortest测试开发/labelinput typecheckbox name idalllabel forall全栈开发/label/td/trtrtd掌握的技能/tdtdtextarea name id cols30 rows10/textarea/td/trtrtd项目经历/tdtdtextarea name id cols30 rows10/textarea/td/trtrtd/tdtdinput typecheckbox name idreadlabel forread我已经阅读公司的招聘要求/label/td/trtrtd/tdtda href#查看我的状态/a/td/trtrtd/tdtdh3请应聘者确认/h3/td/trtrtd/tdtdulli以上信息有效/lili可以尽早就职/lili可以接受加班/li/ul/td/tr/table
/body/html特殊字符
空格nbsp
小于号lt
大于号gt
按位与amp
网站推荐
HTML特殊字符编码对照表
MDN介绍
HTML超文本标记语言 | MDN (mozilla.org) HTML 只是描述了页面的骨架结构.
