HTML和CSS 知识总结

不会学习的菜鸡

已于 2022-04-28 13:24:51 修改

阅读量2.9k

点赞数 4

分类专栏：前端学习文章标签： css html

于 2022-04-27 22:40:32 首次发布

本文链接：https://blog.csdn.net/X200104/article/details/124451537

版权

这篇博客总结了HTML的基础框架、常见标签和面试题，以及CSS的样式表、选择器、字体属性、文本属性、定位方式等知识点，并探讨了CSS的层叠性、继承性和优先级。还涵盖了HTML和CSS的常见面试问题，如浮动、定位和显示隐藏的处理方式。

摘要由CSDN通过智能技术生成

在经过几个月的学习前端知识之后，由于觉得十分的虚浮。所有就重头开始复习一遍，会很认真的总结一些基础知识，虽然不能全部覆盖，但还是有一定的内容的。并且顺带着与之相关的从别的面经得来的面试题也附上，希望能够给大家带来帮助

HTML

一、基础框架

使用vscode的可以直接使用！+TAB直接生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE>为文档类型

作用: 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范

页面语言lang

<html lang="en">指定语言类型，其中en可以换成zh-CN。en定义语言英文，zh-CN定义语言中文

二、常见的标签

1、标签分类

行内标签	span、a、img
块级标签	div、p、h1~h6、表单form、列表ul、ol、dl

（1）行内标签

行内元素不能独占一行，与其他行内元素排成一行，其宽度随元素的内容变化而变化
行内元素不能设置width、height、margin、padding

（2）块级标签

块级元素独占一行，当没有设置宽高时，它默认设置为100%（其宽度自动填满其父元素宽度）
块级元素允许设置宽高，width、height、margin、padding、border都可控制

（3）块级标签和行内标签的转换

display: block 转化为块级元素

display: inline 转化为行内元素

display:inline-block 转化为行内块元素

行内块元素：独占一行，且能设置width、height、margin、padding

2、标签常用的属性

//其中url图像地址、alt为替换文本，图像显示不出来的时候出来的文字、title为提示文本，鼠标放在图片上时显示的文字
<img src="url" alt="" title=""> 

//target为目标窗口弹出方式，具有_self当前窗口和_blank另开窗口
<a href="url" target="_self"></a>

//锚点链接
<a href="#名字"></a>
<h3 id="名字"></h3>

//表格标签   table表格  tr表格的行  td单元格  th表头单元格
<table><!--定义表格-->
    <tr><!--表格中的行--><th>单元格的文字</th></tr>
    <tr><td>第一行</td></tr>
    <tr><td>第二行</td></tr>
</table>

//列表标签  无序列表ul 有序列表ol 自定义列表dl
<ul>
     <li></li>
</ul>
<ol>
     <li></li>
</ol>
<dl>
     <dt></dt>
     <dd></dd>
     <dd></dd>
</dl>

//表单     input输入表单元素    select下拉表单元素   textarea文本域元素
// input输入表单元素
<input type="text" name="username" value="请输入用户名"> 
//select下拉表单元素
<select>
    <option value=""></option>
    <option value=""></option>
</select>
//textarea文本域元素    style="resize: none;为禁止拉伸样式
<textarea style="resize: none;"></textarea>

3、特殊符号

显示结果	描述	实体名称
	空格	&nbsp
>	大于	&gt
<	小于	&lt
"	双引	&quot
'	单引	&apos

三、常见的面试题

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- 
    width    设置viewport宽度，为一个正整数，或字符串‘device-width’
    device-width  设备宽度
    height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
    initial-scale    默认缩放比