1.HTML介绍
1. 前端三大组成部分--HTML(结构)--CSS(样式)--JS(行为)
2. HTML--超文本标记语言:负责的是页面结构
2.HTML骨架
1.
2. <!DOCTYPE HTML> -- 文档类型是html
3. <html> </html> -- 页面中最外层标签--根标签
4. <head> </head> -- 网页头部标签-里面内容主要是给浏览器看的内容
5. <meta charset="UTF-8"> -- 页面编码标准
6. <title> </title> -- 网页标题标签-里面内容会显示在浏览器窗口标签
上
7. <body> </body> -- 网页主体标签-里面内容显示在浏览器的窗口中
3.HTML语法规则
1. HTML页面由正确嵌套的标签(标记)构成
2. 标签分为单标签和双标签
a. 单标签 -- <单标签名称 />
b. 双标签 -- <双标签名称> </双标签名称>
3. 属性的语法
a. 键值对
b. 属性名="属性值"
c. <标签名称 属性名1="属性值" 属性名2="属性值">
4. 空格和换行的实现方法
a. 空格实体 --
b. 换行标签 -- <br />
标签 含义 注意
<h1>一级标题</h1> 标题标签 h1-h6 双标签,共六级
<p>文章段落</p> 段落标签 双标签
<b>加粗效果</b> 文字标签-加粗 双标签,弱语义
<s>删除线效果</s> 文字标签-删除线 双标签,弱语义
<i>倾斜效果</i> 文字标签-倾斜 双标签,弱语义
<strong>加粗效果</strong> 文字标签-加粗 双标签,强语义
<del>删除线效果</del> 文字标签-删除线 双标签,强语义
<em>倾斜效果</em> 文字标签-倾斜 双标签,强语义
<div>大盒子</div> 布局(结构)标签-大盒子 双标签,独占行
<span>小盒子</span> 布局(结构)标签-小盒子 双标签,非独占
<!-- 注释内容 -- > 注释--快捷键ctrl / 源码中可见
运行不显示
<img src="图片路径"/>
属性名="属性值"--键值对语法
图片标签
title-图片标题
alt-图片描述
单标签
title(悬停显示)
alt(失败显示)
4.基础HTML标签
标签语义化的好处--搜索引擎中排名更靠前
5.路径
1. 路径的书写方式分为了绝对路径和相对路径两种
绝对路径
1. 从盘符(根目录)为起点,找目标文件,经过的目录都用" / "隔开
2. 资源的路径不能保证不会变化,所以不用这种方式
相对路径
1. 从当前目录为起点,找目标文件,经过的目录都用" / "隔开
2. 开发人员常用的书写资源路径的方式--我们关注的是最终的显示效果
是否正确就可以了
3. 相对路径的三个方向:
a. 同级路径--目标文件在同级目录-- 直接写目标文件
b. 下级路径--目标文件在下级目录-- 下级目录/目标文件
c. 上级路径--目标文件在上级目录-- ../目录文件
元素类型 元素含义 注意
<input type="text" /> 普通文本
框
文字内容能够显示
提示内容--placeholder属性
<input type="password" /> 密码框 输入内容被星号*代替
<input type="radio" name="xb" />
<input type="radio" name="xb" />
单选按钮 每个单选按钮设置相同name
属性值
默认选中-
checked="checked"
6.超链接
1. 超链接标签使用<a></a>标签可以实现
a. 超链接的作用一般是点着一个文字,跳转到一个页面,所以一
个超链接最基本的内容包含两个部分
b. 点击的内容-- <a>点击的内容</a>
c. 跳转的连接-- <a >点击的内
容</a>
i. <a href="本地资源路径">点击的内容</a>
2. 新窗口打开链接地址
a. <a href="本地资源路径" target="_blank">点击的内容
</a>
3. 空链接
a. 点击后不会发生跳转的链接
b. <a href="#">点击的内容_点击后不跳转</a>
i. 一个#号点击后会瞬移到页面顶部
ii. <a href="###">点击的内容_点击后不跳转</a>
c. <a href="javascript:;">点击的内容_点击后不跳转</a>
d. <a href="javascript:void(0);">点击的内容_点击后不跳转
</a>
7.表单
1. 表单的作用--web网页上用来收集用户数据，并且将数据提交到后台
2. 表单标签:
3. action--数据提交给哪个后台程序
4. method--通过什么方法传递
a. get--明文传递--直接写纸上
b. post--加密传输--信封装起来
5. 常见表单元素
<form action="" method="">
表单域里的内容
</form>
元素类型 元素含义 注意
<input type="checkbox" /> 复选框/多
选框
可以全选,选一部分
默认选中-
checked="checked"
<select>
<option>选项1</option>
<option>选项2</option>
</select >
下拉框 select--下拉框
option--下拉选项
注意下拉框中选项的数量和
顺序
默认选中-
selected="selected"
<textarea rows="行数" cols="列
数"> </textarea>
文本域 通常大小通过CSS设置
不用rows和cols
禁用大小拖拽-resize:none;
<input type="button" value="提
示"/>
普通按钮 文字通过value属性设置
普通按钮效果通过js实现
<input type="reset" value="提示"/> 重置按钮
恢复默认
设置value属性
避免默认内容兼容问题
<input type="submit" value="提
示"/>
提交按钮 提交表单数据到action指定
的后台程序
设置value属性
8.列表标签
1. 无序列表
2. 有序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
五.CSS与选择器
1.CSS语法
1. 层叠样式表--负责的是页面的样式(变大变小变漂亮)
2. CSS写在style标签中
3. 语法结构
2.基础选择器
1. 选择器作用 -- 找到页面元素
2. 标签选择器 -- 标签名
a. 一般标签都重复
b. 需要选中某些标签时使用
3. ID选择器 -- #id属性值
a. id属性不允许重复
b. 唯一选中标签时使用
4. 类名选择器 -- .类名
a. 类名可以重复
b. class属性可以有多个类(class="bz ldxns"),用其中一个
c. 选中属于某个类的标签时使用
3.CSS特性
1. 继承性 -- 子孙元素继承父级元素的样式
2. 覆盖性 -- 同一选择器设置同一样式,后设置的覆盖先设置的
<style>
div{
color:red;
font-size:50px;
}
</style>
<style>
选择器{
样式名:值;
}
</style>
选择器 -- 设置哪些标签的样式
样式名:值; -- 设置成什么样子
4.复合选择器
1. 复合选择器 -- 选择器组合使用
2. 后代选择器
a. 语法 -- 父级选择器 子孙选择器
b. 通过父亲找子孙的时候可以使用
c. 注意目标标签是后面的子孙
3. 并集选择器
a. 语法 -- 选择器1,选择器2,选择器3
b. 需一起选中多个选择器的元素时可以使用
c. 注意目标标签是所有选择器
5.CSS存放位置(引入方式)
1. 内嵌式:style标签中
2. 外链式:样式存入外部css文件
a. 单独将css内容写入css文件中--只写选择器和样式内容
b. 通过link标签引入css文件--href="css文件路径"
3. 行内式:写在目标标签的style属性中--style="样式内容"
4. 三种引入方式的选择
a. 内嵌式 -- 结构和样式(HTML和CSS)混在同一文件
i. 不需要加载外部css文件,加载速度快--电商首页
b. 外链式 -- 代码分离--结构和样式分离--管理修改方法
i. 除了电商网站的首页的其他情况
c. 行内式 -- 一定不要用
6.盒子模型
1. 组成: 内容--内边距--边框--外边距 |
|
收藏
淘帖
踩
