Web前端基础

HTML: 学习如何搭建页面 (盖房子,毛坯房)
CSS: 学习如何美化页面 (装修)
JavaScript: 学习如何给页面添加动态效果

HTML

Hypertext Markup Language: 超文本标记语言

标记语言的格式:

<开始标签 属性名="属性值" 属性名="属性值">标签体</结束标签>

学习HTML 主要学习的就是有哪些标签,以及标签的使用方式

常用快捷键

Alt+Insert 新建文件
Ctrl+D 复制整行并粘贴到下一行
Shift+回车切换到下一行
Ctrl+Alt+L 代码格式化
Ctrl+X 剪切 (可以用做删除)
Ctrl+Z 撤销
Ctrl+Shift+Z 恢复
Ctrl+Shift+/ 注释

文本相关标签

内容标题h1-h6

字体加粗, 独占一行, 自带上下的间距
水平分割线 hr
段落标签 p

独占一行, 自带上下间距
换行br
加粗b
斜体i
下划线u
删除线s
无序列表: ul和li
有序列表: ol和li
列表嵌套: 有序和无序列表可以任意无限嵌套

图片标签img

src设置资源路径:
            相对路径:访问站内资源时使用
                1. 资源和页面在同级目录:  直接写图片名
                2. 资源在页面的上级目录:  ../图片名
                3. 资源在页面的下级目录:  文件夹名/图片名
            绝对路径:访问站外资源时使用,称为图片盗链, 有找不到图片的风险
alt:当图片不能正常显示时显示的文本
title: 鼠标悬停时显示的文本
width/height:设置宽高  两种赋值方式:1.像素 2.百分比
            只设置宽度 高度会自动等比例缩放

超链接a

href: 设置请求的资源路径,作用类似图片标签的src属性
图片超链接: 用a标签包裹文本为文本超链接, 包裹图片为图片超链接
页面内部跳转: 在目的地元素里面添加id属性, 然后在超链接href="#id",这样就能跳转到指定元素的位置

表格标签table

相关标签: table tr表示行 td表示列 th表头 caption表格标题
相关属性: border边框 colspan跨列 rowspan跨行

表单form

作用: 获取用户输入的各种信息并提交给服务器
学习form表单就是学习有哪些控件, 控件包括: 文本框,密码框,单选,多选,下拉选等

<!--action设置请求地址 -->
<form action="http://www.tmooc.cn">
  <!--文本框, name属性是所有控件必须添加的属性 否则提交时不会传递此内容 placeholder占位文本
  maxlength设置最大字符长度  value设置默认值  readonly只读 -->
  <input type="text" name="username" maxlength="5" value="abc" readonly placeholder="用户名"><br>
  <!--密码框-->
  <input type="password" name="password" placeholder="密码"><br>
  <!--value设置提交的内容,如果不设置提交的是on checked设置默认选中 -->
  性别:
  <input type="radio" name="gender" value="m" id="r1"><label for="r1">男</label>
  <input type="radio" name="gender" value="w" checked id="r2"><label for="r2">女</label> <br>
  兴趣爱好:
  <input type="checkbox" name="hobby" value="cy">抽烟
  <input type="checkbox" name="hobby" value="hj">喝酒
  <input type="checkbox" name="hobby" value="tt" checked>烫头<br>
  所在地:
  <select name="city">
    <option value="bj">北京</option>
    <option value="sh" selected>上海</option>
    <option value="gz">广州</option>
  </select><br>
  靓照:
  <input type="file" name="pic"><br>
  生日:
  <input type="date" name="birthday"><br>
  <!--提交按钮-->
  <input type="submit" value="注册">
  <input type="reset">
  <input type="button" value="自定义">
  <hr>
  <button type="submit">注册</button>
  <button type="reset">重置</button>
  <button type="button">自定义</button>

</form>

分区标签

分区标签可以理解为一个容器, 将多个有相关性的标签添加到一个分区标签里面, 便于统一管理
常见的分区标签:
- div: 独占一行
- span: 共占一行
HTML5.0版本增加的分区标签 ,这些标签的作用和div 一样, 为了提高代码的可读性
- header 头
- footer 脚
- main 主体
- nav 导航
- section 区域

CSS 层叠样式表

作用: 负责美化页面 (相当于装修)

如何在html页面中添加css样式代码

三种引入方式:
- 内联: 在标签的style属性中添加样式代码, 不能复用
- 内部: 在head标签里面添加style标签, 在标签体内添加样式代码, 可以当前页面复用不能多页面复用
- 外部: 在单独css文件中添加样式代码, 在html页面中的head标签里面添加link标签把css引入到html页面中

CSS选择器

作用: 用来查找页面中的元素

标签名选择器: 匹配页面中所有同名标签

格式: 标签名{样式代码}
id选择器: 当需要选择页面中某一个标签时使用

格式: #id{样式代码}
类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class值划分为同一类

格式: .class{样式代码}
分组选择器: 将多个选择器划分为同一组进行统一管理

格式: div,#id,.class{样式代码}
属性选择器: 通过元素的属性匹配元素

格式: 标签名[属性名='值']{样式代码}

综合练习:

通过内部样式实现以下效果:
1. 把张学友改成绿色
2. 把刘德华和悟空改成蓝色
3. 修改取经 3 人和刘备的
   背景为黄色
4. 修改提交按钮的背景为红色, 
   自定义按钮的字为粉色
5. 给所有元素添加绿色的边框

选择器(续)

后代选择器: 通过元素和元素之间的层级关系元素元素,选择的范围更广

格式: body div div p{样式代码} 匹配的是body里面的div里面的div里面的所有p(包含)
子元素选择器: 通过元素和元素之间的层级关系元素元素, 选择的范围更精准

格式: body>div>div>p{样式代码} 匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)
伪类选择器: 选择元素的状态包括: 未访问/访问过/悬停/激活

格式: a:link/visited/hover/active{样式代码}

颜色赋值方式

三原色: RGB Red Green Blue , 每一种颜色的取值范围0-255
五种赋值方式:
- 颜色单词赋值: red/blue/yellow/green....
- 6位16进制赋值: #ff0000
- 3位16进制赋值: #f00
- 3位10进制赋值: rgb(255,0,0)
- 4位10进制赋值: rgba(255,0,0,0-1) a=alpha 透明度值越小越透明

背景图片相关

background-image:url("路径") 设置背景图片
background-size:200px 300px; 设置背景图片尺寸
background-repeat:no-repeat; 禁止重复
background-position: 100px 200px; 设置背景图片的位置
background-position: 50% 50%; 设置背景图片的位置

文本和字体相关样式

text-align:right/center; 水平对齐方式
text-decoration:overline上划线/underline下划线/line-through删除线/none去掉修饰
line-height:20px; 设置行高, 单行可以实现垂直居中, 多行可以控制行间距
text-shadow:颜色 x偏移值 y偏移值浓度(值越小越清晰);
font-size:20px; 字体大小
font-weight:bold加粗/normal去掉加粗;
font-style:italic; 设置斜体
font-family:xxxx,xxx,xxx; 设置字体
font: 20px xxx,xxx,xxx; 设置字体大小+字体

元素的显示方式display

block: 块级元素的默认值, 显示特点: 独占一行,可以修改元素的宽高. 包括: h1-h6,p,div
inline: 行内元素的默认值, 显示特点: 共占一行, 不能修改元素的宽高. 包括: span,b,i,s,u,a
inline-block: 行内块元素的默认值, 显示特点: 共占一行, 并且可以修改元素宽高. 包括: input,img
none: 隐藏元素

盒子模型

通过盒子模型相关的样式控制元素的显示效果
盒子模型包括: content内容+border边框+margin外边距+padding内边距
content内容:用来控制元素的显示大小
border边框: 用来控制边框的效果
margin外边距: 用来控制元素的显示位置
padding内边距: 用来控制元素内容的位置

盒子模型之Content内容

控制元素的显示大小
相关样式: width/height 赋值方式:1. 像素 2. 上级元素的百分比
行内元素是不能修改宽高的, 如果必须要修改, 需要将元素的显示方式改成块级block或行内块inline-block

盒子模型之margin外边距

控制元素的显示位置
赋值方式:
- margin-left/right/top/bottom:10px; 单独某一个方向赋值
- margin:10px; 四个方向赋值
- margin:10px 20px; 上下10 左右20
- margin:10px 20px 30px 40px; 上右下左赋值顺时针
行内元素上下外边距无效
左右相邻彼此添加外边距两者相加
外边距塌陷:
- 兄弟元素上下相邻, 彼此添加外边距取最大值
- 父子元素上边缘重叠时, 添加外边距取最大值,会导致父子元素粘连在一起,给父元素添加overflow:hidden样式解决.

盒子模型之边框border

赋值方式:
- border-left/right/top/bottom:粗细样式颜色; 单独某一个方向添加边框
- border:粗细样式颜色; 四个方向添加边框
border-radius:10px ; 设置圆角值越大越圆

盒子模型之内边距padding

控制元素内容的位置
赋值方式: 和外边距类似
- padding-left/right/top/bottom:10px; 单独某一个方向添加
- padding:10px; 四个方向添加
- padding: 10px 20px; 上下10 左右20
- padding: 10px 20px 30px 40px; 上右下左顺时针赋值
给元素添加内边距默认情况下会影响元素的显示范围,给元素添加box-sizing:border-box; 后则不再影响

部分标签会带盒子模型中的某些样式

body 自带8个像素的外边距
段落标签p, 列表标签和内容标题h1-h6 自带上下的外边距
文本框自带边框和内边距
列表标签自带外边距和内边距

1. 刘德华 宽度 100 高度 30
绿色背景红色字体 横向和纵向居中
2. 苹果和香蕉 字体大小 25px 斜体
3. 冰箱去掉加粗 蓝色阴影 
   方向是左下 浓度 3
4. 洗衣机添加下划线
5. 百度去掉下划线字体加粗 
字体大小 20px

HTML文本相关标签和常用快捷键

Web前端基础

HTML

常用快捷键

文本相关标签

图片标签img

超链接a

表格标签table

表单form

分区标签

CSS 层叠样式表

如何在html页面中添加css样式代码

CSS选择器

综合练习:

选择器(续)

颜色赋值方式

背景图片相关

文本和字体相关样式

元素的显示方式display

盒子模型

盒子模型之Content内容

盒子模型之margin外边距

盒子模型之边框border

盒子模型之内边距padding

部分标签会带盒子模型中的某些样式