HTML&&CSS总结报告

##1.html为超文本语言,用于构建web网页

文件后缀为.html,并可以在浏览器中打开

##2.HTML元素(elements)

HTML 使用"标记"(markup)来注明文本、图片和其他内容,以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>,<title>,<body>,<header>,<footer>,<article>,<section>,<p>,<div>,<span>,<img>,<aside>,<audio>,<canvas>,<datalist>,<details>,<embed>,<nav>,<output>,<progress>,<video> 等等

##3.注释

用特殊的记号<!--和-->包括起来,一般注释的快捷键为:ctrl+/

HTML 不区分标签的大小写,建议全部使用小写!

一些元素只有一个开始标签,通常用来在此元素所在位置插入/嵌入一些东西,如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素

元素的属性

包含如下内容:

一个空格,在属性和元素名称之间。(如果已经有一个或多个属性,就与前一个属性之间有一个空格。)

属性名称,后面跟着一个 = 号。

一个属性值,由一对引号 "" 引起来。

##4.标题

HTML 提供了从大到小6级标题,分别是:<h1> ~ <h6>

##5文本格式

p>可以使用mark标记来<mark>highlight</mark> text.</p><p><del>该文本行被视为已删除的文本<p><s>这一行文本将被视为不再准确。</s></p> <p><ins>这一行文本被视为文档的新增内容。</ins>< <p><u>这一行文本将显示为带下划线的</u></p><p><small>这一行文本被视为小字。</small></p> <p><strong>这一行粗体显示<p><em>这一行以斜体显示。</em></p>

##6.超链接

超链接语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

锚点

锚点,也称为书签,用于标记页面的某个元素或位置。通过锚点,我们可以轻易的在长页面内实现跳转。

先使用id属性生成某元素的锚点,然后再使用超链接指向该锚点即可。

##7.图片与文件路径

在 HTML 标签中, 标签用于定义 HTML 页面中的图像。

<img src="图像URL" />

单词 image 的缩写,意为图像。

src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名。

所谓属性:简单理解就是属于这个图像标签的特性。

图像标签属性注意点:

① 图像标签可以拥有多个属性,必须写在标签名的后面。

② 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

③ 属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。

2. 路径

(1)目录文件夹和根目录:

实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。

**目录文件夹:**就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html 文件、图片等。

**根目录:**打开目录文件夹的第一层就是根目录

\1. 相对路径

**相对路径:**以引用文件所在位置为参考基础,而建立出的目录路径。

这里简单来说,图片相对于 HTML 页面的位置

相对路径是从代码所在的这个文件出发,去寻找目标文件的,而我们这里所说的上一级 、下一级和同一级就是图片相对于 HTML 页面的位置。

\2. 绝对路径

**绝对路径:**是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

##8.HTML 中的注释和特殊字符

1 注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。

HTML中的注释以“<!--”开头,以“ -->”结束。

<!-- 注释语句 -->      快捷键: ctrl +  /

一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的.

添加注释是为了更好地解释代码的功能,便于相关开发人员理解和阅读代码,程序是不会执行注释内容的

2 特殊字符

在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。

空格 、大于号、 小于号 重点记住

6.表格标签

6.1.表格的主要作用

1.表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理

2.表格不是用来布局页面的,而是用来展示数据的。

表格的基本语法

<table>

     <tr>

        <td>单元格内的文字</td>

        ...

     </tr>

     ...

</table>

1. <table> </table> 是用于定义表格的标签。

2. <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中。

3. <td> </td> 用于定义表格中的单元格,必须嵌套

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值