HTML基础知识

最新推荐文章于 2020-12-13 21:50:54 发布

李-疯子

最新推荐文章于 2020-12-13 21:50:54 发布

阅读量302

点赞数

文章标签： HTML

本文链接：https://blog.csdn.net/qq_42696138/article/details/81437648

版权

QQ:275487025
QQ群：854312770
欢迎各种大牛指点，和小白一起学习。

前端开发技术三要素：

1。HTML:是网页内容的载体结构
内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等
2。CSS:是网页外在表现
就像网页的外衣。比如，标题字体、颜色变化，或加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现
3。Javascript:是用来实现网页上的特效与交互等行为
如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

超文本标记语言HTML（Hypertext Marked Language):

HTML 是用来描述网页的一种语言
HTML不是一种编程语言，而是一种标记语言 (markup language)
HTML文件的后缀名.html 或 .htm
HTML 使用标记标签来描述网页
HTML由浏览器解释执行
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

HTML标签:

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如<b> 和 </b>
HTML标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML也有单独呈现的标签，如：<img src=“yhit.jpg" />
HTML标签不区分大小写，推荐使用小写
HTML 标签可以嵌套，如：<ul><li> <img src=“yhit.jpg" /> <li></ul>

HTML元素:

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码
HTML元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容,空元素在开始标签中进行关闭（以开始标签的结束而结束）
比如：<br />
大多数 HTML 元素拥有属性，提供了有关 HTML 元素的更多的信息
属性总是以名称/值对的形式出现，比如：name=”value”

 HTML注释:
两大用意：1提示程序猿里面写的功能，不管谁写的，都可以清楚里面的内容；
        2注释掉暂时不用的部分，等什么时候想用了方便快捷。

注释标签:


HTML文档：

HTML文档也称网页，是记录HTML元素的文件,扩展名为html 或 htm
HTML 文档编辑工具 BOM
记事本、Dreamweaver 、Sublime Text 、Notepad++、Editplus ……

HTML文档命名规范
应该只使用字母a-z，排序数字0-9，连字符（-），下划线（_）和句点（.），任何其他字符可能给你带来麻烦，导致文件不能加载或页面加载不正确
尽量以字母开头和使用小写字母
名称要有一定含义
不要忘记文件扩展名

HTML的结构：
 文档的声明：<!DOCTYPE html>
1网页的开始和结束标签：<html></html>
2头部标签：<head></head>
    里面有<title>网页标题</title>
        <meta charset="UTF-8">
3网页主体：<body></body>
注意：
<head> 之间的文本是头信息不会显示在浏览器中，包括基本的描述，整个网页的公共属性
<body> 之间是浏览器中可见的页面内容，是网页的主体

文本标签：
标题标签

<h1~6 align="left|right|center> </h1~6>

段落标签

<p align="left|right|center></p>

换行标签

这里写代码片

预格式化标签  （对空行和空格进行控制）

<pre></pre>

水平线标签

<hr width="" size="" align="" color="" />

无意义标签

<span></span> <div></div>

字体标签

<font color="" face="" size="1~7" ></font>

粗体标签

<b></b>

斜体标签

<i></i>

下划线标签

<u></u>

删除线标签

<del></del>

上标标签

<sup></sup>

下标标签

<sub></sub>

 字符实体：
 字符实体由三部分组成：

以&开始
中间为实体名或实体编号
以 ; 结束
实体名称便于记忆而实体编号的浏览器兼容性更好
实体名称区分大小写
这里写图片描述

列表标签：
有序列表

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

无序列表

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

`自定义列表

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

超链接标签：
空链接：
1返回页面顶部 <a href=“#”></a>
2保持原位置<a href=“javascript:; ”></a>

脚本链接 <a href="javascript:js代码"></a>

普通链接：
1<a href=“链接地址” target=“_blank | _self”title="描述">文本或图片</a>为页面上的所有链接规定默认链接地址或默认跳转方式；
2<base target=“_blank | _self” href=“链接地址” />标签必须嵌套于head标签内；

锚点链接：
使用 name 属性创建 HTML 页面中的锚点
当使用锚时，我们可以创建直接跳至该命名锚的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了
步骤：
创建锚点
<a name="锚点名称"></a>
链接到锚点
同一页面 : <a href="#锚点名称"></a>
不同页面 :<a herf="目标文档URL# 锚点名称"></a>

图片标签：

<img src=""   alt=""   title="" width="" height="" />

src 图片所在URL
alt 图像无法显示时的替代文本，搜索引擎可以通过它指定的文字搜索该图片
width 图片宽度
height 图片高度
border 图片边框

设计网页时经常使用的图片有三种格式：
GIF – 最多支持256色,支持透明,支持多帧动画显示效果.
JPEG | JPG– 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果.
PNG – 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.

表格标签：
基本结构：

<table>
        <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>

<table width=""  height="" bgcolor= "" border=""  align= "" cellpadding=""  cellspacing="" >
    <caption  align= "left或center或right" ></caption>
    <tr  align=""   bgcolor= "" >
       <th> </th>
        <th></th>
  </tr>
  <tr>
        <td rowspan=""  colspan=""  width="" height=""  align=" left|center|right"            valign= "top|middle|bottom"   bgcolor="" ></td>
         <td></td>
  </tr>
 </table>

table：
这里写图片描述

tr：
这里写图片描述

th和td：
<th></th>表格标题单元格：字体加粗居中显示
<td></td>表格数据单元格：字体偏左微细显示
这里写图片描述

李-疯子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识

QQ:275487025 QQ群：854312770 欢迎各种大牛指点，和小白一起学习。前端开发技术三要素：1。HTML:是网页内容的载体结构内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等 2。CSS:是网页外在表现就像网页的外衣。比如，标题字体、颜色变化，或加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现 3。Javasc...
复制链接

扫一扫