Web前端
HTML
-
作用: 学习如何搭建页面结构和准备页面的内容, 相当于盖房子(毛坯房)
-
HyperTextMarkupLang: 超文本标记语言
-
超文本: 指不仅仅是纯文本,还包括字体效果和多媒体(音频,视频和图片)相关
-
学习HTML主要学习的就是有哪些标签,以及标签的使用方法
-
HTML页面结构:
<!DOCTYPE html> 文档声明: 告诉浏览器使用HTML哪个版本的标准解析页面,此写法代表使用html5的标准解析页面 <html lang="en">页面的跟标签,所有标签都写在此标签内部 <head> 头标签, 给浏览器看的内容 <meta charset="UTF-8"> 设置页面字符集 <title>Title</title> 设置页面的标题 </head> <body> 体标签, 给用户看的内容 </body> </html>
文本相关标签
-
内容标题h1-h6
独占一行, 字体加粗, 自带上下间距
-
段落标签p
独占一行,自带上下间距
-
水平分割线hr
-
换行br
-
加粗b
-
斜体i
-
下划线u
-
删除线s
-
无序列表: ul和li
-
有序列表: ol和li
图片标签img
- src: 资源路径
- 相对路径: 访问站内资源使用
- 图片和页面在同级目录: 直接写图片名
- 图片在页面的上级目录: …/…/图片名
- 图片在页面的下级目录: 文件夹名/图片名
- 绝对路径: 一般访问站外资源使用, 又称为图片盗链, 有找不到图片的风险
- 相对路径: 访问站内资源使用
- alt: 图片不能正常显示时显示的文本
- title:鼠标在图片上悬停时显示的文本
- width/height:设置图片的宽高, 两种方式:1.像素 2. 百分比 只设置宽度时高度会自动等比例缩放
超链接a
- href: 资源路径, 类似图片标签的src属性
- 超链接包裹文本为文本超链接,包裹图片为图片超链接
- 页面内部跳转, 在目的地元素里面添加id,然后在超链接的href属性里面#id 这样就可以跳转到目的地元素的位置
表格table
- 相关标签: table表格 tr table row表示行
td table data表示列 th table head表头(加粗并居中) caption表格标题 - 相关属性: border设置边框 colspan跨列 rowspan跨行
表单form
-
作用: 获取用户输入的内容,并提交给服务器
-
学习form表单,主要学习的就是有哪些控件,控件包括:文本框,密码框,单选,多选,下拉选等
-
相关代码:
<h1>注册页面</h1> <!--action设置提交地址--> <form action="http://www.tmooc.cn"> <!--name属性是所有控件都必须有的属性,如果没有该属性则不会提交此控件的内容 placeholder占位文本,maxlength设置最大字符长度 value 设置控件的值 , readonly 设置只读 --> 用户名:<input type="text" name="username" maxlength="5" value="tom" readonly placeholder="用户名"><br> 密码:<input type="password" name="password" placeholder="密码"><br> <!--单选框和多选框必须添加value属性 否则提交的内容为on checked 设置默认选中--> 性别:<input type="radio" name="gender" value="m">男 <input type="radio" name="gender" checked value="w">女<br> 兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟 <input type="checkbox" name="hobby" checked value="hj">喝酒 <input type="checkbox" name="hobby" value="tt">烫头<br> 生日:<input type="date" name="birthday"><br> 靓照:<input type="file" name="pic"><br> 所在地: <select name="city"><!--select 选择--> <!--value设置提交的值,如果不写value则提交标签体内的内容 selected 默认选中--> <!--option 选项--> <option value="bj">北京</option> <option value="sh">上海</option> <option selected>广州</option> </select><br> <!--在按钮里面添加value是设置显示的文本内容--> <input type="submit" value="注册"> <!--重置按钮--> <input type="reset"> <!--自定义按钮--> <input type="button" value="自定义按钮"> <hr> <button type="submit">提交按钮</button> <button type="reset">重置按钮</button> <button type="button">自定义按钮</button>
分区标签
- 作用: 可以将多个有相关性的标签添加到一个分区标签里面, 对多个标签进行统一管理,可以将分区标签理解为一个容器
- 分区标签包括div和span
- div:块级分区标签, 独占一行
- span:行内分区标签, 共占一行
- html5的标准中新增了一些分区标签作用和div一样,好处是提高了代码的可读性
- header 头标签
- footer脚标签
- main主体区域标签
- nav 导航标签
CSS
- Cascading Style Sheets:层叠样式表
- 作用: 美化页面 , 相当于装修
如何在html页面中添加css样式代码
- 三种引入方式:
- 内联:在标签的style属性中添加样式代码, 弊端:不能复用
- 内部:在head标签里面添加style标签,标签体内写样式代码,通过选择器先找到元素对象, 然后再添加样式, 好处是可以复用, 但是只能在当前页面复用,不能多页面复用
- 外部:在单独的css样式文件中写样式代码, 在html页面中引入此文件即可, 这样的话是可以实现多页面复用的
- 工作中因为需要多页面复用所以外部样式会用的更多, 学习过程中 内部样式演示方便所以更多使用内部样式
选择器
- 作用: 用来选取页面中的标签
-
标签名选择器: 匹配页面中所有同名标签
格式: 标签名{样式代码}
-
id选择器: 当需要匹配页面中某一个元素的时候使用
格式: #id{样式代码}
-
类选择器: 将多个不相关的元素设置为同一个class值, 这样就将这多个元素划分成了同一类,然后通过类选择器进行选择
格式: .class{样式代码}
-
分组选择器: 将多个选择器划分为一组(可以理解为将多个选择器合并成一个选择器)
格式: 标签名,#id,.class{样式代码}
-
任意元素选择器: 匹配页面中所有元素,包括html和body
格式:*{样式代码}
-
子孙后代选择器: 通过元素和元素之间的关系匹配元素
格式:body div div p{样式代码} 匹配body里面的div里面的div里面的所有p包括后代
-
子元素选择器:通过元素和元素之间的关系匹配元素
格式:body>div>div>p{样式代码} 匹配body里面的div里面的div里面的所有p子元素不包含后代
-
伪类选择器: 匹配的是元素的状态,包括:未访问状态/访问过状态/悬停状态/点击状态
格式: a :link未访问/visited访问过/hover悬停/active激活{样式代码}