HTML
web技术简介
HTML 描述网页
css 界面美化
javaScript 动作交互
1.html 超文本标记语言
菜鸟教程 www.runoob.com
w3c万维网联盟 对 web进行标准化
2.上网三大部分客户端发起请求，服务器端接收请求并处理，过程遵循fttp 协议
浏览器是网页运行的载体。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lIUGpjt9-1590668953437)(web技术简介 -rx/image-20200527105858237.png)]
第一个HTML网页
第一部分：文档申明 可以省去，不建议
第二部分：网页主体：
第三部分：文档内容!,
标签
HTML中的标签用尖括号包裹的特殊含义的单词，使文本内容以特定的格式显示，标签的分类
-
双标签<>,分为开始标签和结束标签
-
单标签< /> 自结束标签
常用标签
-
标题标签
…
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PPMJqVzn-1590668953440)(web技术简介 -rx/image-20200527113856799.png)]
-
注释 快捷键ctrl + /
-
hr标签 单标签，生成一条横线
color 用于调整颜色，size用于调整横线粗细
html中的颜色，
-
英文字母，
-
十六进制数#000000 - #FFFFFF,但一般的浏览器只支持256中规定的颜色
-
rgb表示
居中标签
-
center 是内容居中显示
段落标签
,把文本内容分为多段
-
shift +end选到末尾
br 换行标签
对字体的操作
font 标签
b 标签 加粗
i 标签 倾斜
sup 标签上标 ；sub 下标
strong:同b标签
删除线：del标签
一般的字体格式化都是使用双标签
图片标签
img标签 src=“指明路径来自网络资源或本地路径，建议使用相对位置” alt=图片加载失败时的提示内容
height高 width宽 px像素 一张图片不知道比例的时候只设置图片的高或者宽，另一个属性将根据比例自动缩放
图片大小的单位默认为像素，也可以百分比进行设置，如果放在body里，则以body为百分比的基准，（以所在容器的宽、高为比例基准）
超链接
引入网络资源需要加https 协议 访问本地资源时最好使用相对路径
列表分为无序列表和有序列表
ul 无序列表 li
/li
ol有序列表 li
/li
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EFndolzL-1590668953442)(web技术简介 -rx/image-20200527165913029.png)]
dl 自定义列表
dt自定义列表头
dd自定义列表项
表格
-
表格的格式
-
表格的结构分解
-
表格的常用熟悉
-
快捷键
-
案例
表格的格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6xTxCCvl-1590668953445)(web技术简介 -rx/image-20200528094149166.png)]
一个tr标签表示一行内容，一个td标签表示一列内容
如果缺少行列标签，则认为是无效行，默认为普通文本内容。
table 中的熟悉又 border（边框粗细，单位像素）
单元格 间距 cellspacing (单元格之间的间距)
cellspacing=“0” 消除单元格之间的默认间距
cellpadding 指单元格中的内容与所在单元格边框之间的间距
行高 height 设置的对象是行tr,一般在30-40像素左右
列宽 width 设置的对象是列td，120像素左右
同一列的单元格如果设置了不同的宽度，最终的宽度取决去最大的设定值
bgcolor 背景颜色 可以给单元格设置，也可以给整个表格设置
设置单元格 或者行，或者整个表格的背景色
bordercolor 边框颜色 只能给table 设置
background 背景图片 不可以和bgcolor一起使用，会导致bgcolor失效。
使用快捷键生成表格
表达式之间不能有空格，属性之间以空格分开
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ROaa3ivx-1590668953448)(web技术简介 -rx/image-20200528113121104.png)]
align=center 对齐方式
块选操作，按住alt，拖动鼠标
单元格合并
分为 列合并colspan=“合并的列数”，合并完将合并的列删除，删除的数目从当前对象的下一个开始开始计数
行合并rowspan=“合并的行数”，合并完将合并的行删除
th表头标签对文本自动加粗并居中
列分组标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q12VxQ84-1590668953450)(web技术简介 -rx/image-20200528151806313.png)]
表单
用于收集用户输入的信息
action:将收集的信息提交到
method：提交方式
-
post ：不会讲内容在地址栏中显示，通常用于传输较大量的用户输入，且比较安全
-
get ：将信息直接在地址栏中直接显示，传输内容较少
input
text:用于收集普通的文本信息
name:收集项的名称
value:盛放用户输入的内容
password:用于盛放密码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ymx4KdYw-1590668953452)(web技术简介 -rx/image-20200528164043451.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ty12TpM4-1590668953452)(web技术简介 -rx/image-20200528165017162.png)]
textarea 用于收集较多的描述内容
button普通按钮
submit :提交
如果不设置name属性将不会提交
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WnahcS1O-1590668953454)(web技术简介 -rx/image-20200528181435310.png)]
存中…(img-Ymx4KdYw-1590668953452)]
[外链图片转存中…(img-Ty12TpM4-1590668953452)]
textarea 用于收集较多的描述内容
button普通按钮
submit :提交
如果不设置name属性将不会提交
[外链图片转存中…(img-WnahcS1O-1590668953454)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O7vHOLj7-1590668953454)(web技术简介 -rx/image-20200528182042339.png)]