1.对于HTML的认识

xxxxtrendd

于 2024-07-16 20:07:42 发布

阅读量46

点赞数 2

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

本文链接：https://blog.csdn.net/xxxxtrend/article/details/140475547

版权

前端基础学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.对于HTML的认识

1.1基本概念

HTML：超文本标记语言，是一种用于创建网页的标准标记语言，不是编程语言。

	      使用标记标签来描述网页。

文件后缀名为.html或者.htm 两种后缀没有区别。


页面基本结构
<!DOCTYPE html>           声明为 HTML5 文档
<html>                    元素是 HTML 页面的根元素
<head>
<meta charset="utf-8">    元素包含了文档的元（meta）数据
<title>doucment</title>   元素描述了文档的标题
</head>
<body>                    元素包含了可见的页面内容，里面有许多标签元素
 
<h1>标题1</h1>
 
<p>段落1</p>
 
</body>
</html>

1.2HTML基础元素

1.2.1 标题  
	1.定义： 通过<h1> - <h6> 来定义标题

	2.不要仅仅是为了生成粗体或大号的文本而使用标题，定义标题是为了用标题来呈现文档结构
	粗体或大号文本可以用CSS样式来实现，不必要为了这个效果让结构变复杂
	默认情况下，html会自动在块级元素前后额外增加空行，比如段落和标题
	
	
1.2.2 段落
	1.用<p> </p> 定义，把html文档分割为若干段落
	
	2.用<p> </p>去插一个空行是坏习惯，用<br/>标签代替
		<br/>是不产生新段落换行标签


1.2.3 链接
	通过<a> 标签定义	
一些属性
	1.href属性    指定链接的地址
	2.target属性  规定在何处打开被链接的文档 
		_blank 新窗口打开
        _self 在与点击相同的框架中打开（默认）
        _top 在窗口主体打开
        _parent 在父框架中打开
	
	
1.2.4 图像
	通过<img> 标签定义
一些属性	
	1.src属性 规定图像路径 ==>有绝对路径/相对路径
    2.alt属性 图像无法显示的时候，指定图像的替代文本
    
  
  
1.2.5 样式
	1.三种方式：
    内联样式- 在HTML元素中使用"style" 属性
    内部样式表 -在HTML文档头部 <head>区域使用<style>元素来包含CSS
    外部引用 - 使用外部 CSS 文件
    
    2.在里面写css来改变html元素的样式


1.2.6 表格
	1.用<table> </table> 定义表格，希望显示边框要用border属性
	2.表头 <th>,大多数浏览器会把表头显示为粗体居中的文本
	3.单元格 <tr></tr> 元素定义行，并在每行中使用 <td></td> 元素定义单元格数据
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>


1.2.7列表
	1.有序列表ol / 无序列表ul
	2.列表里面定义li标签
	3.自定义列表dl，里面定义dt或者dd

1.3块元素/行内元素/行内块元素

1.3.1块元素 block level element
	例如 <h1>,<p>,<table>,<div>
	块级元素的特点：
		一行一个
		可以设置宽高
		默认宽度为容器的100%
		容器级可以包含任何标签
	
	
1.3.2行内元素 inline element
	例如 <b>, <td>, <a>, <img>，<span>
	行内元素的特点：
		一行多个
		不可设置宽高，默认为本身内容宽度
		容纳文本或其他行内元素
	

1.3.3行内块元素 inline-block
	特点：
	和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
 	默认宽度就是它本身内容的宽度（行内元素特点）
	高度，行高、外边距以及内边距都可以控制（块级元素特点）
	
	
	
<div> 定义文档中的分区或节
<span> 组合文档中的行内元素，可以用作文本的容器

1.4布局

1.4.1 用<header>, <nav>, <section>, 以及 <footer> 来创建多列布局
	header定义头部
	nav制作导航栏
	section定义文档中的节
	footer定义文档底部
	在里面使用多<div>，<span>元素，通过css进行定位
	

1.4.2 使用表格<table>
	<table> 元素的作用是显示表格化的数据
	使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式
	里面用tr,th,td等

1.5语义

1.5.1 html5的语义元素
	语义元素清楚地向浏览器和开发者描述其意义。

	非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

	语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。
	
	<article> 		定义文章 
	<aside>			定义页面内容以外的内容
	<details>		定义用户能够查看或隐藏的额外细节。
	<figcaption>	定义 <figure> 元素的标题。
	<figure>		规定自包含内容，比如图示、图表、照片、代码清单等
	<footer>		定义文档或节的页脚
	<header>		规定文档或节的页眉
	<main>			规定文档的主内容
	<mark>			定义重要的或强调的文本
	<nav>			定义导航链接
	<section>		定义文档中的节
	<summary>		定义 <details> 元素的可见标题
	<time>			定义日期/时间

	不同的语义元素有不同的应用场景，在一些特定的情况用这些元素对开发者非常友好。

1.6颜色

最常见的方式是使用颜色名称、十六进制颜色码或者RGB颜色值
	1.名称 例如：red（红色）、blue（蓝色）、green（绿色）等。这些名称可以直接用作CSS样式中的颜色值
	2.十六进制 使用六位的十六进制数表示颜色，每两位分别代表红色、绿色和蓝色的强度
	3.rgb 使用rgb()函数表示颜色，指定红、绿、蓝三个颜色通道的值（0-255）
	4.rgba 类似于RGB，但包括一个alpha通道，用于指定颜色的透明度（0-1之间的值）在rgb基础上多加一个参数
	5.HSL和HSLA hsl()和hsla()函数表示颜色，分别指定色调、饱和度、亮度（和透明度）

1.7类和id

1.7.1 类
	对html元素分类，让我们能够为元素的类定义CSS，为同类设置相同样式。

1.7.2 id
	id属性用于html元素指定唯一的id，一个html文档中不能存在多个相同id的元素。

1.8符号和字符集

1.8.1 符号
一些键盘上不存在的字符可以由实体代替，即一些特定字符
可以用实体编号，十进制或十六进制的引用

可以输出一些表情，数学符号，希腊字母等


1.8.2 字符集
为了正确显示html页面，web浏览器必须知道要使用哪个字符集
ASCII到UTF-8 通过<meta charset=" "> 来指定