HTML基础
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'>
3451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
