#浏览器 内核(渲染引擎+js引擎)+外壳
#5大常用浏览器: chrome 谷歌 内核(webkit blink)
FireFox 火狐 内核(Gecko)
Safiri 苹果 内核(webkit)
opear 欧朋 欧洲,挪威 内核(Presto)
IE 内核(Trident)
前端测试 :一般常用以上5大浏览器
HTML语言
ctrl+B 将文字加粗
ctrl+1 /2 /3 标题
ctrl+shift + i 插入图片
不是编程语言 编程语言都会有自己的语法结构 html语言不是编程语言 它是标记语言
一组标签 --》特定功能—》浏览器里的渲染引擎
html hyper 超 Text 文本 markup 标记 language语言
文本 .txt 文字 字符
超文本 不仅仅只有文字 图片 视频 音频 链接
形式: 闭合标签(双标签)
<>开始标签 </>结束标签
<标签关键字></标签关键字>
<html></html> 根标签
<head></head> 头部标签 对浏览器说话
非闭合标签 (单标签)
<meta charset="UTF-8"> chartset = "UTF-8" 属性名 = ”属性值“
浏览器默认字体字体大小 16px
编码
ASCII 字母+西文+符号 <128 8位二进制 256个数据 第一位0 后7位 128个数据
ASCII扩展 8第一位用了 256
GBK(6000个汉字) GB2312(10000汉字 ) GB18030 (繁体字) 0-127 ASCII +扩充
Unicode 万国码 全球所有字符 (1:01110111 这是一个汉字 还是字母)
UTF-8(解决问题) UTF-16
常用文本标签
1:加粗字体的标签: <b>有效内容</b> <strong>加粗</strong> 唯一差别:strong 语义化 (权重)
2:斜体标签 <i>斜体</i> <em>斜体</em>(语义化)
3:删除标签 (中划线) <del>语义的</del> <s></s>
4:下划线 <u></u> underline
5:水平线 <hr>
<hr color="red" width="300px" align="left">
color 颜色
width 宽度
align 对齐方式 left 左 right右 center 中心居中对齐
无形当中最有形(90%)
span 小容器 图标文字
div 大盒子 大容器 大图大的内容 没有默认属性 默认样式
常用
1:段落标签(大段文字)
<p></p> paragraph 特点:上下外间距(16px)
2:标题标签
hi h1--h6 h1在当前界面只有一个 h1会包裹logo 权重大
3:插入图片的标签 (本质是文字)
<img src="地址" alt="图片找不到文字的提示" >
# 解决图片下间隙问题 : 1:改变对齐方式 ---》vertical-align:middle(中线)
top bottom baseline(只要不是基线都可以解决)
图片路径:
绝对路径 :不建议 c://a/b/a.jpg 网上的图片路径https://m.360buyimg.com/babel/jfs/t1/14767/35/9502/98915/5c8074faE4aa55aa9/0f1a568b3e5bd8f6.jpg
相对路径:本地路径
同级目录 图片和当前文档是一个文件下
上一级 跳出几个文件夹 一个../ 2个../../
下一级
文本属性(css 样式语言)
设置标签属性 : 1:开始标签 < 属性名=“属性值”> 默认属性
自定义样式属性 style="属性名:属性值;属性名:属性值;属性名:属性值; "
# style自定义样式集合
(1)字体属性
字体颜色 : color:red/yellow/green
字体家族: "宋体" "楷体" font-family: "微软雅黑"
字体粗细: font-weight: 100-900 100最细 900最粗 400normal 正常
字体形态:font-style: 斜体 italic / 正常 normal
font: 形态 粗细 字体大小 家族
ps
1:视图–》标尺 点中标尺鼠标右键 设置单位为像素
2: 左侧工具栏 标尺 鼠标拽着拉动 值在菜单栏
3:选区也可以测量
4:切图 6个切片 在你切的的图片上画轮廓
点击文件 —》存储为web格式 选图片后缀 (phg-8) --》命名–——》存储(!!!切换成选中的切片)
在桌面有文件夹 images 里面有你切下来的图片
5:吸管 粘贴 #f5f5f5
<!DOCTYPE html> <!-- html5文档-->
<html lang="en"> <!-- 根标签 --> <!--ctrl+/ 单行注释 ctrl+ shift+/ 多行注释-->
<head>
<!--媒体标签 解释语言 charset=‘utf-8’字符编码-->
<meta charset="UTF-8">
<title>第二阶段 第一天</title><!--登录页 名称-->
<!--相关浏览器 不向用户展示-->
</head>
<body>
<!-- 空格 ¥:钱的符号 © 版权符号 ctrl+d 复制上一行-->
<!--用户可以看到-->
<!--下面为一些常用的标签-->
<b>我是加粗标签</b>
<strong>我是加粗标签</strong><!-- 语义化 权重 -->
<i>我是 斜体</i>
<em>我是 斜体</em><!-- 语义化 权重 -->
<s>中划线</s>
<del>中划线</del><!-- 语义化 权重 -->
<u>下划线</u>
<hr color="red" width="300px" align="left"><!--水平线-->
<!--color 颜色 width 宽度 align 对齐方式 left right center -->
<br> <!--换行-->
<span style="color:black;width:300px;height: 300px;background-color:red" >默认字体</span>
<!--小盒子 包裹小元素 或者是简单的文本-->
<span style="color:red;font:normal 300 50px '楷体' " >默认字体</span><!--font: 形态 粗细 字体大小 家族-->
<!--宽度取决于内容宽度 高度取决于内容高度 -->
<div style="width:300px;height: 400px;background-color: yellow">我是大盒子内容</div>
<!--大盒子-->
<p>我是段落</p>
<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>
<img src="网址" alt=""><!--协议允许图片-->
<img src="同级路径 图片名字" alt="">
<img src="./ 图片名字" alt="">
<!--跳出当前一级路径+图片路径-->
</body>
</html>