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=""><!--name属性是所有控件都必须有的属性,如果没有该属性则不会提交此控件的内容placeholder占位文本,maxlength设置最大字符长度value 设置控件的值 , readonly 设置只读-->用户名:<input type="text" name="username" maxlength="5"value="tom" readonlyplaceholder="用户名"><br>密码:<input type="password" name="password" placeholder="密码"><br><!--单选框和多选框必须添加value属性 否则提交的内容为onchecked 设置默认选中-->性别:<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激活{样式代码}
