HTML和CSS内容总结
HTML内容
1、xhtml和html的区别
<!-- 在html中，标签名是可以大写，也可以小写-->
<H1>这是大写的H1标签</H1>
<h1>这是小写的h1标签</h1>
<!-- 在XHTML里面，就只能小写 标签名必须小写 -->
<h1>这是html标签
<!-- 这说明 在html里面 标签可以不写结束标签 -->
<!-- 但是在xhtml里卖弄 要求标签必须闭合 -->
<div>
<h1>这是div标签中的一个h1标签</h1>
</div>
<div>
<h1>这是div标签中的一个h1标签
</div></h1>
<!-- 在html里面 标签的嵌套 并不是说后开始的先结束 -->
<!-- 但是在xhtml里面 标签的嵌套必须符合规则 -->
<!-- 我们说 xhtml就是html的严格版 -->
<!-- html是超文本标记语言 -->
<name id="uname">张三</name>
<!-- 去学习html 实际上就是去学习标签 -->
<!-- 标签,属性,元素 -->
<!-- 标签:<name></name> -->
<!-- 属性:id="uname" id叫属性名 uname叫属性值 键 -->
<!-- 标签里面的内容 张三 -->
<!-- 元素:<name id="uname">张三</name> -->
<!-- 元素:开始标签+结束标签+属性+标签中的内容 -->
HTML5的版本介绍
<!DOCTYPE html>
<!-- html标签,根标签 lang="en"叫属性 属性名 lang 属性值 en -->
<!-- lang是语言的标签 en 表示英语 -->
<html lang="en">
<head>
<!-- 设置网站的图标,标题.... -->
<meta charset="utf-8">
<!-- charset是指的我们的编码集,目前来说 大陆程序员使用的绝大部分都是utf-8 -->
<!-- 设置网页标题的是title -->
<title>html5版本的声明文档</title>
</head>
<body>
<h1>我是一个h1标签,h1标签内容的标题</h1>
</body>
</html>
HTML文档介绍
<!--
html文档中的代码是纯文档
html叫超文本标记语言
-->
<!DOCTYPE html>
<!-- 文档声明 -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<h1>html文档介绍</h1>
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">
<h1>这是一个h1</h1>
</body>
</html>
HTML中常用标签的使用
注释语句
<!-- 注释语句 -->
<!--
注释的内容是给程序员看的,可能是给自己看的,也可能是给别人看的,主要是给别人看的
注释的内容可以使用中文,也可以使用英文
vscode上关于注释的快捷键 ctrl+/
复制上一行代码:shift+alt+向下的箭头
删除当前行 ctrl+x 实质上是剪切当前行
生成一个带class名字的标签 : div.box 按一下tab就会生成一个class="box"的div
每一个标签你都可以去给他起一个名字 ,就是我们的class id也可以,但是id具有唯一性
想同时选中多行 按着鼠标滑轮即可
-->
基本标签
<!-- 标题标签:加粗我们的文字,让我们的文字变大 独占一行 独占一行的标签,我们称之为男标签 -->
<!-- 后面我们每去学习一个标签,我们都要先搞清楚他的性别 -->
<!-- 男标签独占一行,女标签并排显示 -->
<!-- h1最大,h6最小,但是实际上我们开发过程中,用的最多的是h1~h3,h4~h6基本不用 -->
<!-- 对于h1标签 我们一个页面上 基本上只有一个 -->
<!-- 通常情况下我们会把一个网页的logo使用h1标签包裹起来 因为h1标签 它有利于SEO-->
<h1>第一观察丨天问落火，这封贺电有深意</h1>
<h2>第一观察丨天问落火，这封贺电有深意</h2>
<h3>第一观察丨天问落火，这封贺电有深意</h3>
<h4>第一观察丨天问落火，这封贺电有深意</h4>
<h5>第一观察丨天问落火，这封贺电有深意</h5>
<h6>第一观察丨天问落火，这封贺电有深意</h6>
<!-- hr是单标签,因为他只有开始没有结束 -->
<!-- 但是在实际开发中,基本不用这个,我们更多的是使用css来制作横线 --
文本格式化标签
普通版:重温“红色足迹” 从革命精神中汲取前行动力
<hr>
<!-- b标签 加粗的 bold -->
<b>b标签版:重温“红色足迹”从革命精神中汲取前行动力</b>
<hr>
<!-- strong 加粗 -->
<strong>strong标签版:重温“红色足迹”从革命精神中汲取前行动力</strong>
<hr>
<!-- i标签 斜体标签 -->
<i>i标签版:重温“红色足迹”从革命精神中汲取前行动力</i>
<hr>
<!-- em标签 斜体标签 -->
<em>em标签版:重温“红色足迹”从革命精神中汲取前行动力</em>
<hr>
<!-- u标签 表示带下划线 -->
<u>u标签版:重温“红色足迹”从革命精神中汲取前行动力</u>
<hr>
<!-- s标签 表示中划线 -->
<s>s标签版:重温“红色足迹”从革命精神中汲取前行动力</s>
<hr>
<!-- del标签 表示被删除 -->
<del>del标签版:重温“红色足迹”从革命精神中汲取前行动力</del>
<hr>
<!-- ins标签,也是带下划线 -->
<ins>ins标签版:重温“红色足迹”从革命精神中汲取前行动力</ins>
img标签及其使用
<h1>演示本地图片的使用</h1>
<!-- img是为数不多的一个人妖标签 -->
<img src="./img/001.jpg" alt="你的图片炸了">
<!-- ./表示寻找当前目录 谁的当前:就是13-img标签的使用这个文件的当前目录 -->
<!-- img是image的缩写,src是source的缩写,source是源的意思,src中写图片的路径 地址 -->
<!-- alt表示当你图片的路径出问题的时候,也就是说图片找不到的时候 显示alt中的内容 -->
<!-- <img src="./imgs/001.jpg" alt="你的图片炸了"> -->
<img title="我是一张图片" width="200" height="400" src="http://contentcms-bj.cdn.bcebos.com/cmspic/25b10c33f047c3473b8811956dcae818.jpeg?x-bce-process=image/crop,x_0,y_0,w_1023,h_556" alt="你的图片炸了">
<!-- src中写线上地址能否加载 能加载 前提是你有网络 -->
<img border="10" src="http://contentcms-bj.cdn.bcebos.com/cmspic/25b10c33f047c3473b8811956dcae818.jpeg?x-bce-process=image/crop,x_0,y_0,w_1023,h_556" alt="你的图片炸了">
a标签的使用
<!--
a标签：超链接标签 点一下会跳转到新的页面
a标签是一个 女标签
href属性代表我们要链接的资源
属性值为他的地址
标签包裹的内容就是我们点击的那一片文字
target属性：（target有目标的意思）
1._self 在当前选项卡跳转
2._blank 打开一个新的选项卡
-->
<!--
http:// 协议 www.baidu.com 叫域名
当我们要跳转一个线上地址的时候 必须加上http:// 否则浏览器会认为是一个本地的资源
-->
<a href="http://www.baidu.com">百度一下 默认版</a>
<!-- 默认的是 在当前选项卡跳转 -->
<a href="http://www.baidu.com" target="_self">百度一下 _self版</a>
<!-- _self版也是在本地跳转 -->
<a href="http://www.baidu.com" target="_blank">百度一下 _blank版</a>
<!-- _blank版是打开一个新的选项卡 -->
<a href="#">这是一个空链接</a>
<!-- #是一个锚点链接 -->
列表的三种样式
<!-- 自定义列表 无序列表 有序列表 -->
<!--
自定义列表
dl+dt+dd
列表一定是包裹的形式
dl是男标签
dt是男标签
dd是男标签
-->
<!-- 有序列表是ol+li -->
<!-- 在ol中有一个属性值叫type 取值有:1,a,A,i,I -->
<!-- 默认的是数字 -->
<!-- ol是男标签
li是男标签
-->
<!-- ul+li 是无序列表-->
<!-- ul是男标签
li是男标签
-->
表格的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的使用</title>
</head>
<body>
<!-- 在没有CSS的时候 布局 怎么布 -->
<!-- 我们通过表格来布局 -->
<!-- 表格的标签 table -->
<!-- 行标签 tr row 行-->
<!-- th 表头 td 每一个表格 -->
<!-- cellspace 是单元格之间的间隙-->
<!-- align 有位置的意思 center 居中-->
<!-- 单元格合并 让我们的某个格子跨行 或者 跨列 -->
<!-- rowspan就表示跨行 后面的数字表示跨几行 -->
<!-- colspan表示跨列 后面的数字表示跨几列-->
<table border="1" cellspacing="0" width="600" height="300" align="center">
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
<!-- th自带一个内容居中的属性 -->
</tr>
<tr align="center">
<td rowspan="2">上午</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr align="center">
<!-- <td>上午2</td> -->
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr align="center">
<!-- <td>下午2</td> -->
<td>音乐</td>
<td>音乐</td>
<td>音乐</td>
<td>音乐</td>
<td>音乐</td>
</tr>
<tr align="center">
<td>晚上</td>
<td colspan="5">自习</td>
<!-- <td>自习</td>
<td>自习</td>
<td>自习</td>
<td>自习</td> -->
</tr>
</table>
</body>
</html>
表单的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的使用</title>
</head>
<body>
<h3>十秒加入开心网，找到全部朋友</h3>
<!--
form是表单标签，其中有以下属性
action表示收集完数据后，将数据提交的服务器地址
method表示以什么样的方式提交给服务器 GET的话就是GET请求
name="表单名称"
你只有这个表单，需要在表单中放入表单项，也就是表单控件
-->
<form action="http://www.baidu.com" method="GET">
<!-- 人妖标签 1.img 2.input -->
<!-- label标签 他会绑定input 帮助我们获取焦点-->
<!-- input标签中的属性：
1.type 类型
2.placeholder 提示语
-->
<ul>
<li> <label for="phone">手机号:</label> <input type="text" id="phone" placeholder="输入手机号"></li>
<!-- type类型为text 表示一个普通的文本框 -->
<li><label for="password">创建密码:</label><input type="password" name="" id="password"></li>
<!-- type类型为password 表示一个密码框 -->
<li> <label for="uname">姓名:</label><input type="text" name="" id="uname"></li>
<li><label for="idNum">身份证号:</label><input type="number" name="" id="idNum"></li>
<!-- type类型为number 表示一个数字输入框 -->
<!-- 单选框 -->
<!-- radio 收单机的意思 那么在这里表示单选
必须要求同一类型的单选选项name名相同
有checked 会被默认选中
-->
<li>
<label for="sex">性别</label>
<input type="radio" name="sex" id="" checked>男
<input type="radio" name="sex" id="" >女
</li>
<li>
<label for="">生日</label>
<!-- 下拉菜单 select+option使用(切记) -->
<!-- option中的value值是当我们提交表单的时候提交的 -->
<!-- 我们看到的 页面上展示出来的 是标签包裹的内容 -->
<select name="" id="">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>年
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>日
</li>
<li>
<label for="">我现在</label>
<input type="radio" name="now" checked>在工作
<input type="radio" name="now">在上学
<input type="radio" name="now">其他
</li>
<li>
<label for="">居住地</label>
<select name="" id="">
<option value="henansheng">河南省</option>
<option value="hebeisheng">河北省</option>
</select>
</li>
<!-- 多选 checkbox-->
<li>
<label for="">爱好</label>
<input type="checkbox">打篮球
<input type="checkbox">打网球
<input type="checkbox">上网
<input type="checkbox">跳舞
</li>
<li>
<label for="">自我介绍</label>
<!-- textarea标签 表示文本区域 -->
<textarea cols="30" rows="10"></textarea>
</li>
<input type="button" value="提交">
<!-- button 按钮 -->
</ul>
</form>
</body>
</html>
css基础内容
选择器
常用的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 通配符选择器 全选 */
/* *{} 通配符选择器 全选 */
*{
color: red;
/* color指的是文本中文字的颜色 */
/* 这种选择器常用于清除内外边距
*{
margin:0;
padding:0;
}
*/
}
/* 标签选择器 */
/* 直接标签名{} 前面什么都不要加 */
p{
/* font-size 是指的字体大小 */
font-size: 40px;
}
/* 类选择器 */
/* .类名{} 切记前面是.*/
/* 类名是什么
类名是class后面的属性值
*/
.item{
/* font-style 表示文本的样式 italic 表示 斜体 */
/* font-style: italic; */
}
li.item{
/* 选中li标签里面类名为item的元素 */
font-style: italic;
}
/* id选择器 */
/* #id名{} id名是属性id的属性值 */
#box{
font-weight:bold;
}
</style>
</head>
<body>
<!-- 写样式 讲了几种？ -->
<!-- 1.行内样式 2.页内样式 3.外部样式 -->
<h1>我是一个h1标签</h1>
<p>这是p标签</p>
<ul>
<!-- ul是无序列表 -->
<li id="box">这是id名为box的li标签</li>
<li class="item">这是class名为item的li标签</li>
</ul>
</body>
</html>
关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 后代选择器 */
/* 它不仅仅是选中儿子 而是选中当前这个标签包裹住所有我们选中类名的标签 */
/* .father .son */
.father .son{
color: skyblue;
}
.father .grandson{
color: red;
}
/* 后代选择器end */
/* 儿子选择器 */
/* .father>.son 中间用>连接 */
.father1>.son1{
color: skyblue;
}
.father1>.grandson1{
color: red;
}
/* 儿子选择器end */
/* 兄弟选择器 */
/* 选中的是某个元素后面紧挨着的那个元素 */
/* div+p{} 表示选中div后面紧挨的p标签 */
div+p{
最低0.47元/天 解锁文章
676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
