1.html初体验
超文本标记语言
-
标签成对出现
-
<>里面放标签
-
结束比开始多/
单标签与双标签（一般包裹内容的是）
2.html骨架
-
html：整个网页
-
head：网页头部，存放给浏览器看的
-
body：网页主体，给用户看
-
title：网页标题
!+Enter或者Tab一键生成骨架
3.标签关系
-
父子关系（嵌套关系）
-
兄弟关系（并列关系）
tab缩进 shift+tab可以缩回去
4.注释
<!--...__>注释标签（ctrl+/）在VS Code中
5.排版标签
标题标签
-
标签名：h1~h6(双标签)h1在一个网页中只能用一次，其他可以一直用
（文字加粗，字号逐渐减小，独占一行）
段落标签
-
标签名：p(双标签)
(独占一行，段落之间有间隙)
6.换行与水平线标签
-
换行：br(单标签)
-
水平线：hr(单标签)
7.文本格式化标签
-
加粗：strong b
-
倾斜：em i
-
下划线:ins u
-
删除线：del s
前面几个标签自带强调，一般用他们（第一个）【个人认为强调可读性】
8.图像标签
基本概念
-
<img src="图片的URL" alt="替换文本" title="提示文本”>
src指定图像位置和名称，是<img>的必须属性
（./在vs code中可以当快捷键在src=”之后写）
属性
-
alt:替换文本 图片无法显示时显示的文字
-
title：提示文本 鼠标悬停在图片上的时候显示为的文字
-
width：图片长
-
height：图片宽
（属性名=“属性值” 中间用空格隔开）
9.路径
相对路径
从当前文件位置出发查找目标文件
/ 表示进入文件夹里面
. 表示当前文件所在文件夹（./是进入当前文件所在文件夹）（../进上一级 ../../进入上上级）
绝对路径
从盘符出发查找目标文件
-
从盘符，如从c盘<!-- <img src="c:\images\mao.jpg"> -->
-
在线网址
10.超链接
作用：点击跳转到其他页面(跳转到本地文件：相对路径写法)
基础
<a href="路径">文字</a>
属性
target="_blank"的作用（在跳转界面时保留原有界面）
<a href="路径" target="_blank">文字</a>
-
路径不确定时路径写#【空链接】
11.多媒体标签
音频标签
<audio src="音频的 URL"></audio>
常见属性
-
src(必须属性)：音频URL
-
controls：显示音频控制面板
-
loop：循环播放
-
autoplay：自动播放
<audio src="路径" controls loop autoplay></audio>
[在html5中属性名=属性值时，可简写为一个单词]
视频标签
<video src="视频的 URL"></vedio>
常见属性
-
src(必须属性)：音频URL
-
controls：显示音频控制面板
-
loop：循环播放
-
autoplay：自动播放（浏览器一般在静音播放时才可以自动播放）
-
muted：静音播放
-
width和height也同样可以使用
<vedio src="路径" controls loop autoplay muted></vedio>
12.列表
布局排列整齐的区域
列表分类：无序列表，有序列表，定义列表
无序列表
标签：ul嵌套li【ul是无序列表，li是列表条目】
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> ... </ul>
(ul=unordered list#####li=list item)
-
ul标签里面只能包裹li标签
-
li标签里面可以包裹任何内容
有序列表
标签：ol嵌套li【ol是无序列表，li是列表条目】
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> ... </ol>
(ol=ordered list#####li=list item)
-
ol标签里面只能包裹li标签
-
li标签里面可以包裹任何内容
定义列表
标签：dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。
<dl> <dt>列表标题</dt> <dd>列表描述/详情</dd> ... </dl>
(dl=defined list#####dt=defined title#####dd=defined detail)
-
dl里面只能包含dt和dd
-
dt和dd里面可以包含任何内容
13.表格
基本使用
标签：table嵌套tr，tr嵌套td/th
-
table：表格
-
tr：行（table row）
-
th：表头单元格（table head）
-
td：内容单元格（table detail）
【网页中表格默认没有边框线，要用border属性添加边框】
表格结构标签
（让表格结构更清晰，网页中看不出效果来）
-
thead 表格头部 表格头部内容
-
tbody 表格主体 主要内容区域
-
tfoot 表格底部 汇总信息区域
<body> <table border="1"> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>99</td> <td>95</td> </tr> <tr> <td>李四</td> <td>98</td> <td>99</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>优秀</td> <td>优秀</td> </tr> </tfoot> </table> </body>
14.合并单元格
作用：将多个单元格合并成一个
跨行合并 跨列合并
-
明确合理目标
-
保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
-
跨行合并，保留最上单元格，添加属性rowspan
-
跨列合并，保留最左单元格，添加属性colspan
-
-
删除其他单元格
15.表单(form)
作用：收集用户信息
input标签
type属性值不同功能不同
<input type="...">
-
text:文本框，用于输入单行文本
-
password：密码框
-
radio：单选框
-
checkbox：多选框
-
file：上传文件
input标签占位文本
（占位文本=提示信息）
<input type="..."placeholder="提示信息"> <!--文本框和密码都能用-->
单选框-radio
常用属性
-
name：控件分组，同组只能选中一个
-
checked：默认选中
<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女
上传文件-file
添加multiple属性可以实现文件多选功能
<input type="file" multiple>
多选框-checkbox
默认选中：checked
<input type="checkbox" checked>条款
下拉菜单
标签：select嵌套option，select是下拉菜单整体，option是下拉菜单中的每一项
<select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option selected>武汉</option> </select>
文本域
作用：多行输入的文本表单控件
标签：textarea双标签
label标签
作用：网页中标签的说明文本，增大表单控件的点击范围
-
label标签只包裹内容，不包裹表单控件
-
label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man"> <label for="man">男</label>
-
使用label标签包裹文字和表单控件，不需要属性
<label><input type="radio">女</label>
文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域 都支持label增大范围
按钮-button
<button type="">按钮</button>
-
submit：提交按钮（默认功能）
-
reset：重置按钮
-
button：普通按钮（一般配合js使用）
【需要放到form 表单区域标签中才能一起使用，一般这些都是放里面的】
<form action=""> 用户名：<input type="text" placeholder="输入用户名"> <br><br> 密码：<input type="password" placeholder="输入密码"> <br><br> <button type="submit">按钮</button> <button type="reset">重置</button> <button type="button">普通按钮</button> </form>
16.div和span标签和字体实体
无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
-
div：独占一整行【大盒子】
-
span：不换行【小盒子】
<div> div标签，独占一整行</div> <span> span标签，不换行</span>
字符实体
作用：在网页中显示预留字符
-
空格 & n b s p ；
-
小于号 & l t ；（less than）
-
大于号 & g t ；（greater than）
17.CSS:层叠样式表
体验CSS
层叠样式表（Cascading Style Sheets）样式表语言，美化内容
<title>CSS初体验</title>
<style>
/*选择器{}*/
p {
/*CSS属性*/
color:red;
}
</style>
<P>体验CSS</P>
属性名和属性值成对出现 键值对
【书写在title标签下方，style标签里面书写CSS】
（书写规则：选择器{属性名:属性值;}）
CSS引入方式
-
内部样式表：学习使用
-
CSS代码写在style标签里面
-
-
外部样式表：开发使用
-
CSS代码写在单独的CSS文件中（.css）
-
在html用link标签引入
-
<link rel="stylesheet" href="./my.css"> <!--link 引入外部样式表；rel：关系，样式表 -->
-
行内样式：配合JS使用
-
CSS写在标签的style属性值里
-
<div style="color:red;font-size:20px;">这是div标签</div>
18.选择器
作用：查找标签，设置样式
基础选择器
-
标签选择器
-
类选择器
-
id选择器
-
通配符选择器
标签选择器
使用标签名作为选择器，同名标签设置相同的样式
类选择器
差异化设置标签效果
-
定义类选择器：.类名
-
使用类选择器：标签添加class="类名"
<style>
/*定义类选择器*/
.red {
color: red;
}
.size {
font-size: 50px;
}
</style>
<!--使用类选择器-->
<div class="red size">这是div标签</div>
<!--一个标签可用多个类名，class属性值写多个类名，中间空格隔开-->
多个单词可以用-连接。例如：news-hd
id选择器
作用：差异化色湖之标签的显示效果
场景：一般配合js使用
-
定义id选择器：#id名
-
使用id选择器：标签添加id="id名"
<style>
/*定义id选择器*/
#red {
color: red;
}
#size {
font-size: 50px;
}
</style>
<!--使用id选择器-->
<div id="red size">这是div标签</div>
规则
-
同一个id选择器在一个页面只能使用一次
通配符选择器
作用：查找页面所有标签，设置相同样式
通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
<style>
*{
color: red;
}
</style>
19.画盒子
属性
-
width:宽度
-
height：长度
-
background-color:背景色
20.文字控制属性
-
字体大小：font-size
-
字体粗细：font-weight
-
字体倾斜：font-style
-
行高：line-height
-
字体族：font-family
-
字体复合属性：dont
-
文本缩进“text-indent
-
文本对齐：text-align
-
修饰线：text-decoration
-
颜色：color
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
