HTML与CSS总结

最新推荐文章于 2024-08-11 21:30:56 发布

YING_ZHOU

最新推荐文章于 2024-08-11 21:30:56 发布

阅读量239

点赞数

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

本文链接：https://blog.csdn.net/misuesixx/article/details/107462727

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML与CSS总结

HTML总结

HTML：超文本标记语言( Hyper Text Markup Language )。

1.HTML不是一种编程语言,而是一种标记语言，描述网页的语言。
2.HTML使用标签描述网页中图片、文本、音乐、视频、超链接等。

HTML基本结构标签

HTML标签 <html> </html>
文档头部 <head> </head>
文档的标题 <title> </title>
文档的主体 <body> </body>

文档类型声明标签 <!DOCTYPE>

lang语言种类：zh-CN中文网页，en英文网页 <html lang = "zn-CN">
字符集：UTF-8万国码 <mata charset:"UTF-8"/>

HTML常用标签

1.标题标签

<h1> ——<h6>做标题作用，并依据重要性递减

2. 段落标签与换行

<p> </p>分段
<br/>换行，为单标签

3.`<div>`与`<span>`标签

<div>表示分割、分区（ 1行只能放一个，独占一行）
<span>表示跨度、跨距

4.图像标签

图像标签<img src = "文件名"/>
sec——图片路径
alt——图片不显示，替换文字
title——提示文本
width——图像宽度
height——图像高度
border——图像边框粗细
路径
相对路径：
同一级路径<img src = "img.jpg"/>
下一级路径<img src = "images/img.jpg"/>
上一级路径<img src = "...\img.jpg"/>
绝对路径：

 <img src = "http://www.~/img.jpg"/>

<img src = "C:\Users\~"/>

5.超链接标签`<a href = "跳转目标" targrt = "目标窗口弹出方式"> </a>`

6.特殊字符

&nbsp；—— 空格
&lt；—— 小于号
&gt；—— 大于号

7.表格

<table>
     <tr>
         <td> ~ </td>
      </tr>
 </table>

表头单元格：<th> </th>
表格属性：

align = “left/center/right”（位置）
border = "1/ "（边框）
cellpadding（文字与边框的距离）
cellspacing（单元表格间的空隙）
width、height

8.列表标签

无序列表：

<ul>
    <li> ~ </li>
 </ul>

有序列表：

<ol>
    <li> ~ </li>
 </ol>

自定义列表：

<dl>
    <dt> ~ </dt>
    <dd> ~ </dd>
 </dl>

9.表单标签`<from>`

input输入表
text——输入文本
password——密码字段
radio——单选摁钮
checkbox——多选
submit——提交
reset——重置
button——按钮
file——文件上传
lable用于绑定一个表单元素
select下拉表

 <select>
      <option> ~ </option>
  </select>

CSS总结

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

选择器

基础选择器
（1）标签选择器
（2）类选择器—— .类（class）
（3）id选择器—— #id
（4）通配选择器—— *
复合选择器
（1）后代选择器
（2）子代选择器
（3）并集选择器
（4）伪类选择器——link(未被访问），visited(已访问），hover(鼠标位于方改变，active(鼠标按下未弹起）

字体属性

字体系列 font-family
字体大小 font-size
字体加粗 font-weight
文字样式 font-style

文本属性

文本颜色 color
对齐文本 text-align（center/reight/left/justify)
文本缩进 text-indent
装饰文本 text-decoration（none/underline/overline/line-through)
行间距 line-height

CSS元素

块元素——可设置高度、宽度、内外边距
行内元素——一行可显示多个，不可设置高度、宽度、内外边距
行内块元素——一行可显示多个，可设置高度、宽度、内外边距
转化为块元素：display:block;
转化为行内元素：display:inline;
转化为行内块元素：display:inline-block;