网站建设的对比分析,源码网站大淘客cms,wordpress手机电脑,保定 网站建设软件开发目录
一、HTML基础
1、HTML是什么#xff1f;
2、认识 HTML 标签
3、HTML文件的基本结构
二、HTML快速开发
三、HTML常见标签
1、标题标签#xff1a;h1~h6
2、段落标签#xff1a;p
3、换行标签#xff1a;br
4、图片标签#xff1a;img
5、超链接#xff1a…目录
一、HTML基础
1、HTML是什么
2、认识 HTML 标签
3、HTML文件的基本结构
二、HTML快速开发
三、HTML常见标签
1、标题标签h1~h6
2、段落标签p
3、换行标签br
4、图片标签img
5、超链接a
四、表格标签
五、表单标签
1、form 标签
2、input 标签
1文本框
2密码框
3单选框
4多选框
5普通按钮
6提交按钮
3、select 标签
4、textarea 标签
六、无语义标签divspan
七、综合练习用户注册 一、HTML基础
1、HTML是什么 HTML是超文本标记语言。文本就是用记事本显示我们可以看懂的内容而超文本更nb一点不仅仅有文本显示文本能显示的内容里面还可以放视频、图片、链接等等标记语言由标签构成的语言。 HTML类似world文档里面可以放文本、视频、图片、链接等等如图 现在我们创建一个.txt文件里面的放下面这样的内容 h1我是⼀级标题/h1 h2我是⼆级标题/h2 h3我是三级标题/h3 然后再把后缀改成 .html如图 打开后如图 但是上面的代码不是html的标准规范是经过浏览器的解析后得到的结果浏览器有很强的鲁棒性会经可能的把正确的内容显示出来。
2、认识 HTML 标签 1HTML标签大多数成对出现的也会有一些单标签。 2这里 h1 是开始标签/h2是结束标签。 3标签名是放在 里面的如h1、h2。 4开始标签和结束标签中放的是标签的内容。 5开始标签中可能会带有 “属性”如下图的 id 属性相当于给这个标签设置了一个唯一的标识符例如身份证号码。 3、HTML文件的基本结构 基本结构如下图 html 标签是整个 html 文件的根标签最顶层标签。 head 标签中写页面的属性。 body 标签中写的是页面上显示的内容。 title 标签中写的是页面的标题。 4、HTML的标签层次结构
、 还是这个图html 的子标签是 head 和 body相反的head 和 body 的父标签是 html而title 的父标签是 headhead 的子标签是 titlehead 和 body 则是兄弟关系 下面画出了其层次关系如图 标签直接的结构关系构成了一个DOM树如上图这种。DOM 是 Document Object Mode文档对象模型的缩写。 二、HTML快速开发 开发工具我们使用 VS Code 官网https://code.visualstudio.com 打开时提前创建好你要在哪个文件目录下练习前端代码然后在VS Code点击下图这个选项然后选择文件路径。 再点击下面选项创建文件。 创建好后如图 在VS Code中我们可以输入一个 ! 然后再按 回车键 或者 tab键 就会自动生成一段代码如图 然后在我们之前选择的目录下就可以看到新创建的 .html 文件如图 因为里面什么都还没写所以打开是啥都没有的如图 下面随便写点东西如图 保存再刷新一下当前的网页如图 三、HTML常见标签
1、标题标签h1~h6 如图代码加上 h1我是标题1/h1 h2我是标题2/h2 h3我是标题3/h3 h4握手标题4/h4 h5我是标题5/h5 h6我是标题6/h6 打开 .html 文件如图 可以看到字体从1到6越来越小。
2、段落标签p 在HTML中段落、换行符、空格都会失效如果需要分成段落需要专门的标签p标签表示是一个段落如图 使用p标签就可以进行换行。
注意 1、p标签描述的段落前面没有缩进HTML中没有CSS有。 2、自动根据浏览器的宽度来决定排版。 3、html内容首尾处的换行、空格均无效。 4、在html中文字之间输入的多个空格只相当于一个空格。 5、html中直接输入换行不会真的换行而是相当于一个空格。 3、换行标签br 如果想要换行可以使用 br标签br是break的缩写表示换行。如图 注意 1、br是一个单标签不需要结束标签。 2、br标签不行p标签那样带有一个很大的空隙空隙大小标题h 段落p 换行br 3、br/是规范写法不建议写成 br。 4、图片标签img img标签必须带有 src 属性表示图片的路径如图我们搞个小猫的图片。 可以看到图片很大我们可以控制宽度width和高度height一般这里只设置一个就好了然后另一个会根据原图片的比例自动适配合适的宽度 / 高度如图 px的英译是像素的意思但这里指的是长度单位前端的长度单位有px em 还能设置边框border参数是宽度的像素但一般使用CSS来设定。
注意 1、路径分绝对路径和相对路径使用哪个都可以。 2、属性可以有多个不能写到标签之前。 3、属性之间用空格分割可以是多个空格也可以是换行。 4、属性之间不分先后顺序。 5、属性使用 “键值对” 的格式来表示。 5、超链接a 超链接的标签名是 a其中里面的有两个属性 href 属性必须要有表示点击之后会跳转到哪个页面 target 属性是可选的如果不加这个属性默认_self在当前页面打开href里写入的地址如果是_blank则用新的标签页打开。 如图 四、表格标签 table 标签表示整个表格。 tr表示表格的一行。 td表示一个单元格。 thead表格的头部区域。 tbody表格的主体区域。 table 包含 trtr 包含 td。表格标签有一些属性可以用于设置大小边框等但一般使用CSS方式来设置。这些属性都要放到table标签中 align是表格相对于周围元素的对齐方式align center不是内部元素的对齐方式 border表示边框。1 表示有边框数字越大边框越粗 表示没边框。 cellpadding内容距离边框的距离默认 1 像素。 cellspacing单元格之间的距离默认为 2 像素。 width / height设置尺寸。会提示 placeholder让文本框中显示提示语。会提示 注意上面这几个属性除了最后两个其他的VSCode都提示不出来。 下面是代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodytable aligncenter border1 cellpadding20 cellspacing0 width500
height500trtd姓名/tdtd性别/tdtd年龄/td/trtrtd张三/tdtd男/tdtd10/td/trtrtd李四/tdtd⼥/tdtd11/td/tr/table
/body
/html 执行结果 五、表单标签 表单是让用户用户输入信息的重要途径分成两个部分 表单域包含表单元素的区域重点是 form 标签。 表单控件输入框提交按钮等重点是 input 标签。 1、form 标签 描述要把数据按照什么方式提交到哪个页面。如图 关于 form 需要结合后端代码来进一步理解这里先不介绍后面再做详细研究。
2、input 标签 各种输入控件单行文本框按钮单选框复选框。 type必须有表示输入控件的种类取值种类很多buttoncheckboxtextfileimagepasswordradio等。 name给 input 起了个名字尤其是对于 单选按钮具有相同的 name 才能多选一。 valueinput 中的默认值。 checked默认被选中。用于单选按钮和多选按钮 下面介绍一些常用的类型
1文本框
input typetext
结果如下可以在这个文本框中输入你想要输入的信息。 2密码框
input typepassword 3单选框 性别input typeradio namesex男input typeradio namesex女input typeradio namesex保密 结果如下这里只能多选一 注意这里的单选框之间必须有相同的name属性才能实现 多选一 的效果。
4多选框 爱好input typecheckbox 唱input typecheckbox 跳input typecheckbox rapinput typecheckbox 篮球 结果如下可以进行多选 5普通按钮 input typebutton value我是一个按钮 结果如下可以点击但不会出现任何效果需要搭配JS使用。 代码改成如下点击后就会显示hello的信息。 input typebutton value我是一个按钮 onclickalert(hello) 6提交按钮 form actiontest.htmlinput typetext nameusernameinput typesubmit value提交/form 提交按钮必须放在 form标签中。 结果如下 这里点击提交后就会尝试把请求发给服务器。这里跳转到计算机当前目录下的 test.html中。
3、select 标签 这是下拉菜单其中里面的 selectedselected 表示默认选中。 selectoption北京/optionoption selectedselected上海/optionoption深圳/option/select 结果如下默认选中是上海。 4、textarea 标签 表示文本域的内容就是默认内容在这边标签里写的内容空格、换行都会有影响但这里的 rows 和 cols 属性不会直接使用都是使用 CSS来改的。 textarea rows3 cols50afaafwawfafwwaf/textarea 执行结果如下 当然我们也可以在这个网页更改文本中的内容文本框的大小也可以更改如图 六、无语义标签divspan
div 标签division 的缩写含义是分割
span 标签含义是跨度
就是两个盒子用于网页布局 div 是独占一行的是一个大盒子。span 不独占一行是一个小盒子。 这里的效果类似 邮寄包裹要邮寄的零散东西用袋子装起来到快递站寄快递时会吧袋子装起来的东西再用箱子装起来。 divspan咬人猫/spanspan咬人猫/spanspan咬人猫/span/divdivspan兔总裁/spanspan兔总裁/spanspan兔总裁/span/divdivspan阿叶君/spanspan阿叶君/spanspan阿叶君/span/div 可以看到被 div 框起来的都在同一行而被 span 框起来的都进行了分割。 七、综合练习用户注册 用户注册界面如下 代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1用户注册/h1tabletrtd用户名/tdtdinput typetext placeholder请输入用户名/td/trtrtd手机号/tdtdinput typetext placeholder请输入手机号/td/trtrtd密码/tdtdinput typepassword placeholder请输入密码/td/tr/tabledivinput typebutton value注册span已有账号/span a href#登录/abr//div
/body
/html 最后面的 超链接 a 的属性 href#表示该链接指向当前页面的同一位置具体来说当点击这个连接是会发生以下情况 1、浏览器会尝试将当前页面滚动到ID为 # 的元素处。 2、如果页面中没有ID为 # 的元素则浏览器会将页面滚动到顶部。 因此href#通常用于创建指向页面内部的锚链接允许用户快速跳转到特定部分或元素。 都看到这了点个赞再走吧谢谢谢谢谢
