目录
学习HTML的总结
一.概述
黑马讲过前端三剑客html，css，js在网页对一只鸟的作用,其中html就赋予这只鸟骨架。在学习完html后，我们就开始做一些简单的网页啦。css赋予这只鸟羽毛和颜色。在学习完css后，我们就开始对自己的纯html网页进行优化啦。
二.html的相关说明
html是超文本标记语言，我们用它的标签来创建网页，并在其中写入自己的内容。它常见的标签有div,p,img,a,li等等。每个标签都有自己的作用和不同。需要注意的是标签们大多是成对出现，如<p>...</p>,<div>..</div>等，但也有例外换行<br> 它后面不需要</br>
三.标签
- 标题标签
标题标签有六个,<h1>到<h6>,p1最大，h6最小，我们可以拿来给一篇文章的标题用，根据文章结构，总标题等就用h1,h2这种大一点的标题标签，小段落就可以用h5,h6这种小的
- 段落标签
<p>,我们用它来装我们需要展示的数据
- 超链接标签
<a>,我们可以拿来做页面内的跳转，也可以实现页面外的跳转
页面内的跳转:
<p id="ccc">我的id为ccc</p>
<a herf="#ccc">跳到id为ccc的标签位置</a>页面外的跳转
<a herf="https://www.taobao.com/">淘宝首页</a>
需要注意的是，这里herf为跳转目标位置 ,如果是页面内跳，用#加上对应的id
- 按钮标签
<button>,我们可以在里面写上触发函数，并定义函数体。实现一些前端逻辑功能。
<button @click="fun">调用函数fun()<button>这里只要点击这个按钮，我们就可以触发js中函数fun()
- input标签
<input></input>我们可以通过它来输入内容，再通过其他方法得到输入的值，这样我们就可以实现人机的交互啦
然后需要注意的是，input可以通过设置type的值来改变input的内容显示形式,文本为text密码为password数字为number
- div标签
这个标签十分常用,区块元素标签，会自动分行,我们通常会用它来装各种标签，形成一块一块的。
- form标签
该标签，我们会在里面放上一些输入框来收集我们网站需要用到的信息
<form>
<!-- 文本框，注意有 placeholder 提示符 -->
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码：<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄：<br>
<!-- 数字输入框，注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表，注意 selected 属性 -->
党派：<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域，注意 rows 和 cols 属性 -->
您的建议：<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>- img标签
光有文字的网站是不过漂亮的，我们还有图片，img标签就可以显示图片.
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">我们可以通过它来展示该网址对应的图片,src是img的属性，它就是该图片存在的位置；
四.CSS的相关说明
CSS：Cascading Style sheet层叠样式表或级联样式表。css是一种样式设置规则，用于控制页面的外的样式，css可以拿来对html的标签进行美化，如果我们都用纯html,那么前端就太丑啦。
五.CSS样式表的调用
css有三种调用方法:内部样式、行内样式、外部样式
内部样式
也称为内嵌样式，在页面头部通过style标签定义
对当前页面所有符合样式选择器的标签起作用
行内样式
也称为嵌入样式，使用HTML标签的style属性来定义
只对设置style属性的标签起作用
注意：几乎所有HTML标签都具有style属性
外部样式
使用单独的css文件来定义，然后在页面中使用link标签或@import指令来引入
使用link标签链接外部样式表(推荐)
<link rel="stylesheet" type="text/css" href="css文件的路径">使用@import指令导入外部样式表
<style>
@import url(css文件的路径);
</style>六.选择器
1.基础选择器
1.1 标签选择器
也称为元素选择器，以HTML标签的名字作为样式应用依据
1.2 类选择器
使用自定义名称，以.作为前缀，然后通过HTML标签的class属性值作为依据
注意事项：
同时调用多个类选择器，以空格隔开
类选择器不能以数字开头
注意：几乎所有的HTML标签具有class属性
1.3 ID选择器
使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性值作为样式的应用依据，一对一的关系
注意：几乎所有的HTML标签都具有id属性，且id的值必须唯一
2.复杂选择器
2.1 复合选择器
标签选择器和类选择器、标签选择器和ID选择器，一起使用
必须同时满足两个条件才能应用样式
2.2 组合选择器
也称为集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
2.3 嵌套选择器
在某个选择器内再设置选择器，通过空格隔开
只有满足层次关系最里层选择器的标签才能应用样式
注意：使用空格不区分父子还是后代，表示的后代，使用>表示的是父子关系才可以
2.4 伪类选择器
根据不同的状态显示不同的样式，一般多用于a标签，即超链接
四种状态：
link ：未访问的链接
visited：已访问过的链接
hover ：鼠标移动到a标签上，即悬浮在链接上
active ：选定的链接，被激活
注意：书写顺序：link–>visited–>hover–>active
2.5 伪元素选择器
first-letter：对应元素内容中的第一个字符
first-line：对应元素内容中的第一行
after：配合content属性使用，在指定元素后面增加内容
before：配合content属性使用，在指定元素前面增加内容
七.CSS常见属性
1.color
该属性用来设置颜色.
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}有三种方法，颜色的单词，#xxyyzz,rgb(x,y,z);xx,yy,zz对应三原色0-255，x,y,z也是.
2.text-align
该属性用来设置文本对齐方式.
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}有居中，靠右等等
3.盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}这样我们就可以设置好div的属性大小啦
以上就是简单的一个html,css总结,更多内容请见菜鸟编程
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
