HTML简介
- html是一个超文本标识语言（hyper text markup language）是由一串代码组成，通过标识和标签来渲染文字、图片、音频、视频、动画、表格等。
html的主要作用：就是让各大浏览器都能够显示同样的页面。
1、网页有哪些内容组成
- 文字、图片、视频、音频、动画、表格
2、网页背后的本质是什么
- 前端程序员写的代码
3、前端代码是如何咋变成网页的
- 通过浏览器的转化（渲染）成用户能看到的页面
- 浏览器：是网页显示、运行平台，前端的开发必备利器
- 渲染引擎（内核）：浏览器中针对代码进行解析
内核不同会导致加载同样的代码，显示有所区别，不同内容对代码的解析速度、性能、效果也是不同的
| 浏览器 | 渲染引擎(内核) | 代表性产品 |
|---|---|---|
| IE/edge | Trident | 猎豹、360、百度、搜狗 |
| FireFox | Gecko | 火狐 |
| safari | webkit | 苹果自带的 |
| chrome | Blink | 其实webkit分支 谷歌、欧朋 |
| QQ浏览器 | X5 | 微信 搜一搜 |
html只是描述网页的一种语言，不是编辑语言
h5 le8以下版本不支持h5
判断标签支持某浏览器的某个版本Can I use... Support tables for HTML5, CSS3, etc
案例：手写一个简单的网页
<!DOCTYPE html> <!--说明一下代码全部是html-->
<html> <!---->
<head>
<title>软测三期</title>
</head>
<body>
<center>hello web</center>
i am rllt<br/>
i from china
</body>
</html>注：html的注释（<!--xxxxx-->）
- 双标记也叫做常规标记，例如<html></html>有头有尾，标记中可以添加属性和属性值
- 单标记也叫作空标记，没头没尾，但是也可以加属性和属性值
常用的标记
1、h标记
- 作用是标题，h1~h6，一个网页最好只有一个大标题
- 属性：align
- 属性值：left（左）center（中间）right（右）
2、p标记
- 作用是指定一个段落，并自动换行
- 属性:align
- 属性值:left(左) center(中间) right(右边)
3、br 单标记
- 作用是换行
4、<em>、<i> 标记
- 作用是让字体进行倾斜
5、<del>、<s>标记
- 作用给文字加上横线。
6、<u> 标记
- 作用为文字加上下划线
7、<b>、<strong>标记
- 作用是着重突出显示某文字。加粗
8、sub和sup 标记
- 作用 sub 是下标 sup 是上标
9、font标记
- 属性:color size
10、<a>标记
- 作用：主要跳转网页链接或者链接到本地文件
- 属性:href="XXX"|"http://XXXXXX"
- 相对路径 : 相对于html所在的路径而言，去调用本地文件
- 绝对路径:从根分区一直到文件所在位置，所有经过的路径全部写上
11、hr标记
- 作用:生成一条横线
- 属性：size 设置大小单位 px(像素)
- width: 横线在网页显示的长度
- color：横线的颜色设置
- align:横线放置的位置（left center right）
body标记常用属性
- bgcolor：设置网页背景颜色
- backround：设置网页背景图片
pre、div、p标记
- 是一个块标记，同时可将pre标记中的所有内容完全展现，包含换行、空格等。
span标记与p 、div的区别是
- span只占用自己所占用的页面空间，不会占用整行
ul 无序列表
- 作用：生成一个列表，并且每行前没有序号
- ul和ol标签里面只能包含li标签，li标签中可以放置其他标签。
格式
<ul > <li></li> </ul>
属性：
- type：指定列表每行前面序号的形式 有disc（小黑点） dircle(空心圆) square（实心方块） none（表示没有序号，使用最多）
ol 有序列表
- 作用：生成一个带有序号的列表
- 属性：type 指定列表序号的形式，共有5种 1、 A、 a、 I、 i
<ol > <li></li> </ol>
img 标签
- 作用：是在网页中插入图片
属性：
- src：指定图片所在的路径
- 路径输入方式：相对路径如果同级目录我们可以直接调用 1.gif
- 如果是在图片在上层目录 ../1.gif 上上层用../../1.gif
- width:设置图片宽度
- height：设置图片高度。一般情况指定宽度或者高度其一，图片是等比例缩放。
- border:图片加边框
第三章css
- html 很多标签 <p> <h1> <div><span>
css 层叠样式表
- 作用:是给HTML标记添加各种表现形式，比如文本样式、背景颜色、背景图片。
css语法格式
<html>
<head>
<style type=“text/css>
标签名称{
属性:属性值; <---用分号隔开
}
</style>
</head>
<body>
</body>
</html>
<!-- h1{ color: red; }
标签名称 属性 属性值
-->
html的注释是<!-- XXX -->
css 的注释 /* XXXX */
- style标签的唯一属性 type 属性值 text/css
选择器
一、基本选择器
*
{
color:red;
}
二、标签选择器
h1
{
color:red;
}
三、id选择器
#myid
{
color: yellow;
}
标签属性 id=“myid”
四、class选择器 (又称 类选择器)
.myclass
{
color: rgb(170, 47, 9);
}
标签属性 class=“myclass”
简单常用属性
-
width 宽度
-
height 高度
一般标签都会使用的两个属性
字体属性
-
font-size：文字大小，px
-
font-family:字体类型
-
font-style：斜体
-
font-weight: 粗体 取值bold。
<a href="#">网站首页</a>| <a href="#" id="a1" >联系我们</a>| <a href="#">产品中心</a>| <a href="#">企业新闻</a> <body> <p> 我爱中国 </p> <h1> 载卓 </h1> <ul> <li>蒸羊羔</li> <li>蒸熊掌</li> <li>蒸1熊掌</li> </ul> </body>
css边框属性
使用div为例
- width:宽度
- heigh：高度
- border-top:上边框
- border-bottom：下边框
- border-left：左边框
- border-right：右边框
边框的类型
- none(无边框)
- solid（实线）
- dashed（虚线）
- dotted（点状线）
width: 200px; height: 150px; border-left: 5px solid yellow; border-top: 1px dashed blue; border-right: 3px dotted red; border-bottom: 1px solid red;
css指定外边框
-
margin=left：外边框的左边
-
margin-top：外边框的上
-
margin-right：外边框的右边距
-
margin-botto：外边框的下边距
css指定内边框
-
padding-left: 80px; 内边框的左边距
-
padding-top: 249px;内边框的上
-
padding-bottom: 30px;内边框的下
-
padding-right: 200px;内边框的右
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
