太原企业网站建设,全面的移动网站建设,百度推广计划,网站开发 性能方面文章目录 什么是HTML#xff1f;HTML的读取、运行HTML的标签注释标签标题标签段落标签换行标签格式化标签图片标签a标签表格标签列表标签表单标签form标签input标签文本框单选框复选框普通按钮提交按钮文件选择框 select标签textarea标签特殊标签div标签span标签 什么是HTMLHTML的读取、运行HTML的标签注释标签标题标签段落标签换行标签格式化标签图片标签a标签表格标签列表标签表单标签form标签input标签文本框单选框复选框普通按钮提交按钮文件选择框 select标签textarea标签特殊标签div标签span标签 什么是HTML
我们知道 网站 前端网页 后端服务器。前端网页是展示给用户看的后端服务器是用来存储数据和组织业务逻辑的。
那如何制作一个前端的网页呢 其实主要依赖三门编程语言 HTML描述页面的结构 CSS描述页面的样式 JS描述页面的动态交互
今天我们就先来介绍一下HTML的语法和使用让大家可以做出一个网站的页面结构。CSS和JS会在后面的篇章中介绍。
HTML的读取、运行
我们知道代码的执行都是需要经过编译的想要编译就一般需要使用到开发工具就像Java运行在JDK上一样。那么前端的这三种编程语言该运行在什么样的开发工具上呢直接使用浏览器就可以。
HTML不需要编译直接让浏览器“读取”就能执行。浏览器最核心的东西就是内核它的内核就能帮助我们识别HTML并把页面渲染在浏览器上。
HTML的标签
HTML是一个标签化的语言它借助标签来完成自己的功能。 注 html是由标签组成的 大部分标签都有开始标签和结束标签小部分的标签只有开始标签没有结束标签 标签之间是可以嵌套的他们之间是树形结构的。 html是head和body的父标签head和body是html的子标签。 head和body是兄弟标签 注释标签
!--这是注释--注我们可以在 !- -和- -直接添加注释内容 标题标签 h1这是一级标题/h1h2这是二级标题/h2h3这是三级标题/h3h4这是四级标题/h4h5这是五级标题/h5h6这是六级标题/h6段落标签 p这是一段话/p注段落标签之间会换行并且有明显的段落间距 换行标签
br注 br标签是一个单标签只有开始标签没有结束标签在HTML里面必须使用br标签进行换行直接按enter换行是没用的 格式化标签 strong加粗/strongb加粗/bi倾斜/iem倾斜/ems删除线/sdel删除线/delu下划线/uins下划线/ins图片标签
img src alt注 img标签是一个单标签只有开始标签没有结束标签img标签必须要有一个src属性通过这个属性来指定你要展示的图片的路径。这个路径可以是绝对路径也可以是相对路径还可以是网络路径alt属性会在图片加载失败时显示出alt里面的文字自己写入的 a标签
a href/a注a标签就是超链接的意思可以链接到另外一个资源点击时即可访问。 表格标签 tabletrth姓名/thth年龄/th/trtrtd张三/tdtd1/td/trtrtd李四/tdtd2/td/trtrtd王五/tdtd3/td/trthead这是thead部分/theadtbody这是tbody部分/tbody/table列表标签
有序列表 olli张三/lili李四/lili王五/li/ol无序列表 ulli张三/lili李四/lili王五/li/ul自定义列表 dldt一些人/dtdd张三/dddd李四/dddd王五/dd/dl表单标签
表单标签就是为了和用户交互的。
form标签 form action/hi typegetinput typetextinput typesubmit value提交/form注 form标签的功能是构造一个HTTP请求进行前后端交互。必须搭配submit使用 input标签
input标签有很多的形态
文本框 input typetextinput typepassword单选框 input typeradio namegender男input typeradio namegender女注设置为单选框类型后只有指定相同的name属性才能达到互斥的效果 input typeradio namegender idmalelabel formale男/labelinput typeradio namegender idfemale checkedcheckedlabel forfemale女/label注 可以使用label来扩大点击范围。不设置时只有点击⭕才能选上设置后点击文字也可以选上使用checked属性可以设置默认选中 复选框 input typecheckbox nameaction吃饭input typecheckbox nameaction checkedchecked睡觉input typecheckbox nameaction打豆豆注也可以设置checked属性也可以使用label来放大点击范围 普通按钮
input typebutton value这是按钮 onclickalert(hello)注点击按钮后会触发onclick设置的行为 提交按钮
input typesubmit value提交按钮注搭配form表单标签使用进行前后端交互 文件选择框
input typefile注可以在本地选择文件上传到服务器 select标签 selectoption北京/optionoption深圳/optionoption上海/optionoption selectedselected杭州/option/selecttextarea标签
textarea cols50 rows10/textarea注 input只能写一行textarea可以写多行可以通过cols属性设置文本框的宽度可以通过rows设置文本框的高度 特殊标签
下面介绍的这两个标签搭配CSS、JS可以实现上面介绍的大部分标签的功能
div标签
div这是div/div注是块级元素默认会换行 span标签
span这是span/span注是行内元素默认会放在同一行
