1.html 文档基本结构
HTML文档结构 <html> <head></head>:head内放的内容不是给用户看的 是给浏览器去识别做相应操作的 <body></body>:body内放的内容就是浏览器展示给用户看到的花里胡哨的页面 </html>
head内常用标签 title:定义网页标题 style:内部支持直接写css代码 link:引入外部的css文件 script: 1.内部可以直接编写js代码 2.可以通过src属性引用外部js代码 meta: name属性 keywords description
2.html 标签分类: 1.双标签 2.自闭和标签
3.body内常用标签
body内常用标签 你所看到的花里胡哨的页面 其实内部都是html代码 很丑很乱 基本标签 h1~h6:标题标签 s:删除线 b:加粗 u:下划线 i:斜体 p:独占一行 br:换行 hr:分割线 特殊符号 空格 <p>a大于b a > b</p> <p>a小于b a < b</p> <p>a&b a & b</p> <p>人民币 ¥10000000000</p> <p>版权标识 ©</p> <p>注册商标 ®</p> 常用标签 div 块儿级标签 span 行内标签 本身没有任何特殊意义 但是这两个确实使用最多的 这两个标签是用来做前期的页面布局的 img 图片标签 src 1.可以写一个网站图片地址 2.还可以写本地的图片地址 3.url(自动朝该url发送get请求要数据) alt 当图片加载不出来的时候 默认展示的提示信息 title 当鼠标悬浮在图片上的时候 展示的提示信息 width,height 修改一个 另外一个会自动等比例缩放 如果两个都修改图片就会失真 a 链接标签 href 1.放一个url 点击就会跳转到该url所对应的资源 target 控制是否在当前页跳转 默认是在当前页跳转 _self 新建页面跳转 _blank 锚点功能 href不单单可以写url 也可以写另外一个a标签id值 点击就会跳转到该id值所对应的a标签所在的位置 标签应该具备的属性 1.id属性:类似于身份证号 用来唯一标识当前html页面中的某一个标签 在同一个html页面中 id值不能重复 2.class属性:类似于面向对象的继承 直接引用别的类的样式 列表标签 无序列表(较多) ul li 只要页面上出现了比较有规则排列的文本 基本上都可以用无序列表来实现 有序列表 ol li 标题列表 dl dt标题 dd内容 表格标签(******) 展示网站数据的时候 一般情况下可以使用表格标签 <table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr> <td></td> </tr> </tbody> </table> 先表格标签 先写结构 然后写数据 一个tr就是一行 th和td之分 一个加粗一个不加粗 通常情况下表头用th,表单内容用td 表单标签(*******) form标签 获取用户输入(输入,选择,上传文件....)并且将数据打包发送给后端 action参数 用来控制数据提交的路径(到底朝哪个后端服务器提交数据) 三种写法: 1.不写 默认就是朝当前该页面所在的地址提交数据 2.全路径(https://www.baidu.com) 3.只写路径后缀(/index/) 获取用户输入 input标签 该标签是一个行内标签 input类似于前端的变形金刚 type属性 text 普通文本 password 密文 date 日期 radio 多选一 checkbox 多选多 默认选种 checked="checked" 当标签的属性名和属性值相同的时候 可以只写属性名 女<input type="radio" name="gender" checked="checked"> 简写 女<input type="radio" name="gender" checked> reset 重置 button 普通按钮 submit 触发form表单提交动作 file 获取文件 select标签 下拉框 一个个选项就是一个个option标签 默认是单选的 可以加一个multiple该成多选 <select name="" id="" multiple> <option value="">新垣结衣</option> <option value="">明老师</option> <option value="">嫖老师</option> <option value="">波老师</option> </select> 如何让option标签默认选中 加selected="selected" <select name="" id="" multiple> <option value="" selected="selected">新垣结衣</option> <option value="">明老师</option> <option value="" selected>嫖老师</option> <option value="">波老师</option> </select> textarea标签 获取大段文本 label通常是配合input一起使用的 for用来填写对应的input标签id值 点击label标签内的内容 会自动让对应的input标签 聚焦 能够触发form表单提交数据的按钮(******) <input type="submit"> 可以通过value属性来指定按钮文本内容 <input type="submit" value="注册"> <button>点我</button> input获取到的用户输入就类似于是字典的value input中的name属性就类似于是字典的key 标签的分类2 1.块儿级标签 独占一行 h1~h6 p br hr div 1.块儿级标签内部可以嵌套任意的块儿级标签和行内标签 2.特列:p虽然是块儿级标签 但是它的内部只能嵌套行内标签 不能嵌套块儿级标签 如果嵌套了 没有问题 知识不符合html语法规范 2.行内标签 u s i b span 自身文本多大 就占多大 行内标签内部不能嵌套块儿级标签和行内标签 书写标签的时候 你只需要写标签的名字 之后tab键就可以自动补全 emmet插件
来源:https://www.cnblogs.com/bigbox/p/12102153.html