HTML基础
HTML是什么文件命名规范先来看看html文件的基础结构html基础语法常用标签文本标题标签字体加粗和倾斜段落标签：p标签常见的字体标记常用转义字符列表a标签(超链接标签)的使用图片标签的使用(img)路径的使用div和span标签的使用表格标签的使用表单HTML是什么
HTML指的是超文本标记语言(Hyper Text Markup Language) www万维网的描述性语言。XHTML指可扩展超文本标记语言(EXtensible HyperText Markup Language) 是一种置标语言，表现方式与超文本标记语言(HTML)类似，不过语法上更加严格。HTML5指的是HTML的第五次重大修改(第5个版本)文件命名规范
小写英文字母、数字、下划线的组合不包含汉字、空格和特殊字符必须以英文字母开头先来看看html文件的基础结构
<!DOCTYPE html> <!-- 声明文档类型 --><html><!-- 当前文档规范 语言 en:英文 当前页面是否进行翻译 cn --><head> <!-- 头部 引入外部的链接 css/js/vue/react/jquery/icon --><meta charset="UTF-8"><!-- 字符集编码 utf-8 国际编码 对页面中的中文进行翻译的 --><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">1.在移动端中才会使用 2.视口 用户在浏览器中可见的区域范围 等比例缩放<meta http-equiv="X-UA-Compatible" content="ie=edge"> 表示当前页面根据最新的ie浏览器版本进行渲染页面--><title>这是标题</title><!-- 网页的标题 --></head><body><!-- 内容区域：网页中的所有html标签建议都写在body内 如果你把代码写在body外面，浏览器会自动的把代码提取到body内，当代码量过多的时候，会造成浏览器卡顿的情况--></body></html>
html基础语法
html注释 <! – 注释 -->常规标签/双标签 <标签名称 属性1=‘属性值1’ 属性2=‘属性值2’></标签名称> 空标签/单标签 <标签名称 属性=‘属性值’/>注意
- 在<后面的第一个单词就是标签名称,标签或者标记或者元素
- 在标签名称后面的都是当前标签的属性(修饰当前标签的属性) 标签名称和属性之间一定要有空格
- 属性和属性值之间一定要用等号，属性值要用引号
- 如果一个标签含有多个属性，属性不区分前后顺序
- 单标签通常情况下有一个/表示结束,在html文件中可以不写，但是在xhtml文档中必须写，不写的话会语法报错
常用标签
文本标题标签
+ 标签名称：h1~h6 双标签+ 默认的样式：h1~h6 文字大小越来越小，加粗效果越来越弱+ 使用方法：- h1通常用来存放当前网页最重要的部分 标题或者logo 唯一性- h2~h6没有固定的用法
字体加粗和倾斜
+ 加粗标签：b/strong+ 默认样式：+ 字体加粗+ b和strong都可以表示加粗，之间有什么区别？是有区别的，但是官方说肉眼不可见，浏览器区别不明显+ 官方推荐使用strong，b依然是可以使用的+ 倾斜标签：i/em+ 默认样式:+ 字体倾斜+ i和em有区别，但是官方又说肉眼不可见，浏览器区别不明显+ 官方推荐使用em，i依然是可以使用的，使用率更高更广泛，引入页面图标和字体
段落标签：p标签
+ 默认样式+ 换行+ p标签之间是有间距的+ 宽度根据可视区域进行换行
常见的字体标记
- u 下划线- br 强制性的换行- hr 水平线
常用转义字符
- sup 幂 次方- sub 化学方程式 右下标-  ； 不换行空格 - >；>右尖括号- <；<左尖括号- ©；备案中图标版权 ©- ®；注册商标
列表
无序列表<ul><li>第一行</li><li>第二行</li></ul>默认符号(实心圆)
有序列表
<ol><li>第一行</li><li>第二行</li></ol>type:规定列表中的列表项目的项目符合的类型语法:<ol type='1'></ol>1 数字顺序的有序列表(默认值) (1,2,3,4,5)a 字母顺序的有序列表,小写 (a,b,c,d,e)A 字母顺序的有序列表,大写 (A,B,C,D,E)i 罗马数字,小写 (i,ii,iii,iv,v)I 罗马数字,大写 (Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ)start:规定有序列表的开始点。(start的属性值必须是数字)语法:<ol start='3'></ol>
自定义列表
<dl><dt>第一行</dt><dt>第二行</dt></dl>
实心圆还是序号是谁的默认样式？ ul/ol li？ 实际是父级元素的，子级元素会显示，原因是继承了父级的默认样式
a标签(超链接标签)的使用
+ 默认样式- a标签默认的字体颜色不一样(浅蓝色吧应该)- 有默认下划线- 超链接标签，指针移入的时候会变成小手，引导用户点击+ 属性- href 地址- title 提示文本 鼠标移入时候会提示用户的信息文本- target a标签跳转的方式- _self 默认值 覆盖原窗口- _blank 打开新窗口,不会覆盖原窗口- rel 文档关联 通常情况下可以表示引外部的连接或者其他类型文件，在a标签中常用的属性为nofollow+ nofollow作用- 防止不可信的内容 防止指向一些垃圾链接- 付费链接 防止费钱链接影响网站在浏览器中的排名 seo 搜索引擎优化- 引导爬虫去搜索一些有效的页面，谷歌浏览器推荐使用这个属性+ nofollow使用方法- 在a标签中直接添加<a rel="nofollow"></a> 告诉当前页面的a标签无须进行跟踪搜索- 在头部的meta的标签内书写:<meta content="nofollow"/>告诉网站所有的a标签都不进行跟踪搜索+ 如果a标签需要跳转到相应的本地文件，但是这个文件还没有开发完成，a标签该如何操作？- 为空 但是页面会刷新，影响开发- # 推荐使用- javascript:;不推荐使用这个属性值，写多会造成浏览器阻塞
图片标签的使用(img)
+ 有初始的宽高、由本身图片所决定+ 属性- src 路径地址- alt 当网络状态不佳的时候，图片加载失败或者图片设置地址有问题的时候，会出现的提示文本 seo- title 提示文本 title属性可以在所有的html标签中使用- width/height 宽/高 px html属性的属性值可以不接单位- border 边框 数字 默认的边框样式和颜色
路径的使用
+ 绝对路径：找到根目录- 通常情况下根目录都是含有当前电脑的磁盘名称的- 上传到服务器或者放在别人的电脑上去使用+ 相对路径- 同级目录当前目标文件/文件夹的名称- 父级找子级父级文件夹名称/当前目标文件- 子级找父级../当前目标文件
div和span标签的使用
+ div：没有具体的含义,在网页中充当一个容器/盒子来布局的 - 独占一行+ span：没有具体含义,在网页中包裹一段文本或者一个文字 - 在一行内显示
表格标签的使用
标签名称：table - 表格tr - 行td - 列th - 列标题表格里面的属性设置: html属性- width/height 宽高- border 边框 默认为黑色，样式默认为实线- bordercolor 边框颜色- bgcolor 背景颜色- cellspacing 单元格之间间距的处理，属性值常用为0- cellpadding 单元格与内容之间的距离+ align 水平方向 left right center- table、tr、td均可添加+ valign 垂直方向 top bottom middle- 加在table是无法实线垂直方向居中的- tr、td 默认就是垂直居中的+ 单元格的合并：属性值皆为数字(合并几个单元格)- 列合并 colspan- 行合并 rowspan- 总结：跨行合行、跨列合列+ rules=“rows/cols/all/none/groups” 添加分隔线- rows：位于行之间的线条- cols：位于列之间的线条- all：位于行合列之间的线条- none：没有线条- groups：位于行组合列组之间的线条 分组数据的行分组- thead 表格的头部 - 只有一个- tbody 表格的主体 - 有多个并且默认会生成这个标签- tfoot 表格的底部 - 只有一个数据的列分组- colgroup span属性，选中几个列 只有宽度才有作用，其他属性没有用
表单
表单标签<form></form>属性:action = '接口地址'method = ‘get/post’name = '表单名称'？ 参数+ 表单字段集<fieldset></fieldset>- 在浏览器中会有一个宽度占满全屏，高度自适应的盒子- 收集用户信息- form放在最外层进行嵌套，可以进行相互嵌套+ 字段集标题<legend></legend>属性- align 水平方向对齐方式 left right center justify 两端对齐，文字数量有要求+ 绑定 提示信息标签<label for='绑定控件id名'></label>
表单控件
<input>属性:type = '控件类型'name：属性标识表单域的名称value：属性定义表单域的默认值，其他属性根据type的不同而有所变化。maxlength：控制最多输入的字符数size：控制框的宽度(以字符为单位)placeholder：h5新增的属性 - value占位置并且需要删除- placeholder不占位置不需要删除+ 文本框<input type='text' value='默认值'/>+ 密码框<inpur type='password'/>+ 提交按钮<input type='submit' value='按钮文字'/>+ 重置按钮<input type='reset' value='按钮文字'/>+ 空按钮<input type='button' value='按钮文字'/>+ 单选按钮组<input type='radio' name='sex'/>男<input type='radio' name='sex' checked='checked'/>女(默认选中)+ 复选框组<input type='checkbox' name=''/>篮球<input type='checkbox' name=''/>唱跳<input type='checkbox' name='' disabled='disabled'/>rap* disabled = 'disabled'(禁用)* checked = 'checked'(默认选中)+ 下拉列表(菜单):<select><option>选项1</option><option>选项2</option><option>选项3</option></select>selected 默认选项+ 表单域多行文本定义<textarea name='' cols='' rows='' ></textarea>rows和cols属性用来设置文本输入窗口的高度和宽度,单位是字符阻止浏览器对窗口的拖动设置: {resize:none;} (css属性)+ 文件上传<input type='file'>
