本文详细介绍了HTML5、CSS3和JavaScript的基础知识，涵盖了c/s架构、b/s架构，以及各种HTML标签如头部元素、文本格式、链接、图像、视频、音频、表格、表单等的使用方法和CSS的选择器。
一.WED前端
应用软件：c/s架构 b/s架构
web前端：html5 css3 javascript
html5：超文本标记语言----超链接，文字，标签
标签语法规范：<>开始，</>结束-----双标签
<标签名 属性名=“属性值“>标签体</标签名 属性名=“属性值“>------可以嵌套
input img---------单标签
属性：定制元素的行为，属性是不通用的，每一个标签存在自身的属性，当属性名等于属性值时,只需要写属性名，不需要写属性值。
二.HTML
1.样式
<!DOCTYPE html> //文档声明：告诉浏览器这是一个html文件
<html lang="en"> //html最外层标签，包裹着所有html标签代码 lang= “en”是用英文网站 lang=“zh-CN"表示中文的网站
<head>
<meta charset="UTF-8"> //元信息：编写网页中的一些赋值信息 charset="UTF-8”国际编码，让网页不出现乱码的情况
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> // 网页的标题；骨架
</head>
<body>
//显示网络内容的区域
</body>
</html>2.注释
<!-- 内容 -->
示例：
<!-- 这是加粗的字体
v反馈v反馈v
v能否均经费
-->文本修饰
3.题目
标题标签-----h1-h6------逐级减小， 独占一行
划分区块
<span></span> ---无语义标签
<div></div> ---- 大盒子
4.换行
br:换行
<br> </br>5.水平线
hr：水平线
<hr> </hr>6.段落
p:段落
<p> </p >7.格式化
strong：加粗
<strong> </strong>em：斜体 i：斜体
<em>刀枪剑戟 斧钺钩叉</em>
<i>刀枪剑戟 斧钺钩叉</i>sub：下标
<sub>[4]</sub>sup：上标
<sup>[4]</sup>ins：下划线 u：下划线
<u>2018年9月28日</u>del：删除线 s：删除线
<s>国进行国事访问</s>链接
8.路径
路径：
1、绝对路径 ：在自己电脑上，从盘符开始的资源的路径
2、相对路径：相对于当前文件来说的路径 ../：表示上一级 ./:表示当前级
3、网络路径：搜索出来后的地址路径
9.图像
img：图像
src：图像地址
< img src="C:\Users\21195\Desktop\广州\前端\day3.16\素材\1.jpg" alt="这是一张未加载出来的法斗的照片" title="555" align="bottom" vspace="200px" hspace="20px">alt属性：图片出现问题时候，显示的文字
title属性：提示信息
align属性：
vspace属性
hspace属性
10.视频
不能直接使用该标签，需要使用超链接和视频标签文件地址
<a href=" " target="_blank"> 点击进入新的页面</a >video：视频 src：视频地址
<video src="../素材/MV/Jewel-Stay Here Forever(高清).mp4" controls loop autoplay muted></video>需要写属性，不然打开超链接也不能播放
controls属性： loop属性：
autoplay 属性： muted属性：
11.音频
不能直接使用该标签，需要使用超链接和音频标签文件地址
<a href="08-音频.html" target="_blank"> 点击进入新的页面</a >audio：音频 src：音频地址
<audio src="../素材/Jewel - Stay Here Forever.flac" controls autoplay></audio>需要写属性，不然打开超链接也不能播放
controls 属性： autoplay属性：
12.超链接
a：超链接----跳转链接
href：音频或者视频标签文件地址
<a href="09-视频.html" target="_blank"> 点击进入新的页面</a >target属性：在当前页面可以打开新窗口
13.特殊符号
列表
14.无序列表
ul：无序列表 li：列表项
<ul typ
ul：无序列表 li：列表项
<ul type="square">
<li>螺蛳粉</li>
<li>榴莲</li>ul的type=""属性默认是小圆点，type="square"属性是小方点
15.有序列表
主要用于排列式 ol：有序列表 li：列表项
<ol type="I" start="10">
<li>螺蛳粉</li>
<li>榴莲</li>ul的type=""属性默认是数字，从1开始，type="I"属性是使用该样式去标明，start="10"是改变属性序号的默认值从几开始
16.表格
th标签：表格表头--表格最上面的那行
<table width="400px" border="2" cellspacing="0">-------table：表格，width：宽度，border属性:表格边框的厚度， cellspacing属性:单元格之间的间隙
<caption>2022级逃课名单</caption>--------caption：表格题目
<thead>
<tr align="center" bgcolor="pink">------tr：行 ，align= "center"居中对齐，bgcolor：背景颜色
<td rowspan="2">111</td>-----td：表格单元，rowspan属性:合并行，也可以说是占几行
<td>111</td>
<td>111</td>
</tr>
</thead>
<tbody>
<tr align="center" height="50px">----align= "center"居中对齐，height="50px"高度
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tfoot>
<tr align="right">------align属性:左右对齐方式 valign属性:上下对齐方式
<td colspan="3">222</td>-------colspan属性:合并列，也可以说是占几列
</tr>
</tfoot>
</table>cellpadding属性:单元格内的空间
表单？
form，input-----双标签，表单
input的type属性：
<form action="" method="post" enctype="multipart/form-data">------get、post区别 ：1、get相对于post较为安全 2、http协议上规定不同 3、数据量
昵称：<input type="text" placeholder="亲输入4-6位汉字" readonly value="张三" name="usename">--- 普通的输入框，内容在一行显示 readonly:只读
<br />----换行
密码：<input type="password" name="password" required>----type="password"密码框 ，required:设置为必填项
<br />
<!-- name属性，表明是一组单选 checked:默认选中 -->
性别：
<label><input type="radio" name="sex" value="nan">男</label>-----type="radio"单选框
<input type="radio" name="sex" checked value="nv">女</label>-----name属性一样，表明是同一组单选
<br />
你喜欢吃的食物是：
<input type="checkbox" name="hobby">榴莲-----type="checkbox"多选框
<input type="checkbox" name="hobby">香蕉-----name属性一样，
表明是同一组单选
<input type="checkbox" name="hobby">莲雾
<input type="checkbox" name="hobby" id="huolongguo"> <label for="huolongguo">火龙果</label>？
<input type="file" multiple="multiple">----type="file"上传文件，multiple可以多选
<input type="email">-----type="email"邮件
<input type="time">-----type="time"时间
<input type="color">----type="color"颜色
<input type="submit" value="点击">----type="submit"属性按钮，value="点击"默认提示语
<button>点击</button>------按钮标签
<input type="button" value="普通按钮">------type="submit"属性按钮，value="点击"默认提示语
</form>
文本框？
<textarea name="liuyan" cols="300" rows="10" maxlength="200" placeholder="请写下你的留言"></textarea>
textarea：文本域，cols="300"定义几行，rows="10"定义几列，placeholder="请写下你的留言"默认提示语，
17.下拉框
select，option---双标签，下拉框
<select name="city" multiple>------multiple：使其可以多选
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="广州" selected>广州</option>-------selected将其设为拉选框的默认值
</select>
三.CSS
<style>
选择器{
属性名:属性值;
属性名:属性值;
}
</style>
<!-- 外链----推荐 -->
<!-- <link rel="stylesheet" href="./08-index.css"> -->
选择器
基本选择器
标签选择器
标签名{
}类选择器
类名{
}id选择器
id名{
}通配符选择器
*{
}包含选择器
子代选择器 ----找的是亲生的标签（儿子女儿）
.a>li {
color: pink;
}后代选择器 ------找的是所有后代中满足的标签
逗号选择器 ------同时选择多个标签，可以用，隔开
.a li,
.one {
color: green;
}属性选择
/* */
input[属性名="password"] {
}
/* 具有某个属性的指定标签 */
标签名[属性名] {
}
/* 属性的值中包含某个值 */
标签名[属性名*="e"] {
}
/* 属性值以什么开头 */
标签名[属性名^="p"] {
}
/* 属性值以什么结尾 */
标签名[属性名$="t"] {
}
/* +表示的是下一个标签 */
.标签名+p {
}伪类选择器
/需要按照上面的顺序从上往下书写
/* 访问前 */
标签名:link {
}
/* 访问后 */
标签名:visited {
}
/* 鼠标悬停时 */
标签名:hover {
}
/* 鼠标点击时 */
标签名:active {
}
7468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
