HTML5笔记（一）

最新推荐文章于 2024-06-16 09:59:58 发布

李小二冲啊

最新推荐文章于 2024-06-16 09:59:58 发布

阅读量106

点赞数 1

分类专栏：笔记文章标签： html5 html css web

本文链接：https://blog.csdn.net/weixin_53380646/article/details/119218843

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5的基础知识，包括标签的使用，如单标签<br>和<hr>，双标签<h1>、<p>、<img>等，以及表格、列表和链接的创建。此外，还讲解了标签的属性，如align和类型属性，并探讨了内联元素如<span>和<div>的特点及应用场景。文章还涵盖了CSS基础，如尺寸、颜色、内边距和外边距的设置，以及元素的分类和样式控制。

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

HTML5是什么？

网站建设步骤

买域名
租空间
网站设计
特定工具将网站上传到空间中
推广
维护

独占一行
<h1>标题</h1>
————
<p>段落标签</p>
————
<hr>	水平线
<hr>的三个属性：
	<body>
		<hr width="88%" color="red" size="10">
		宽度、颜色、粗细
	</body>
————
<ul>
	<li>无序列表</li>
</ul>
————
<ol>
	<li>有序列表</li>
</ol>
————
<dl>
	<dt>城市</dt>
	<dd>北京</dd>
	<dd>上海<dd>
</dl>
————
<div></div>
____
<table>
	<tr>
		<td></td>
	</tr>
</table>
---------------------------------------------------------
不独占一行，可以和其他元素排列在一起的
<u>下划线</u> 
<s>删除</s>
<em>倾斜 </em> 
<i>倾斜</i>   
<b>加粗 </b>  
<strong> 加粗</strong> 
<sub>下标</sub>  
<sup> 上标</sup> 
<a href='' target='_self/_blank/_new' title='baidu'>百度</a>
<span>没有特殊的效果，但是可以包裹文字进行更改样式</span>  
--------------------------------------------------------
a标签
<a href='' title=''  target='_new'></a>
<a href='' title=''  target='_blank'></a>
<a href='' title=''  target='_self'></a>
-------------------------------------------------------------------------------
<img src='' alt=‘图片加载失败的提示信息’  title='鼠标移入的提示文字'>

路径：
  绝对路径  C:\Users\94560\Desktop\qf_project1\day01\code\taobao\images\pig.jpg
  相对路径  相对于当前文件的路径
            ./    			访问同级目录
            ../    			访问上级目录
            ./images/1.jpg  访问下级目录
-------------------------------------------------------------------------------
注意：独占一行的这些标签内部可以嵌套不独占一行的标签
<p>
   <a href=''></a>
</p>
————
<h1>
   <a href=''></a>
</h1>
————
<h1>
   <span></span>
</h1>

标签的属性

独占一行的标签的共有属性：
align（水平方向对齐方式）：left、center、right
<h1 align='center'>标题</h1>
<p align='center'>段落标签</p>
—————
<ul>      
    <li align='center'>无序列表</li>
</ul>
----------------------------------------------------------------------
列表属性：type（类型）

无序列表：type='circle'、type='disc'、type='square'
      
有序列表：type='a'、type='A'、 type='i'、type='I'

span标签

	span 标签用来定义文本内容，可以是单独的一句话，一些内容，也可以是段落里面的内容。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。span 标签是不带任何默认样式的，所以它极大的提高了我们可以对文本内容自定义样式的需求。

span标签的特点：

不独占一行，可以和其他元素排列在一起
span标签不支持align属性
span不能设置宽度和高度
支持左右的padding，上下的padding尽量不要用
span标签设置背景时，字的宽度就是span的宽度
span标签可以嵌套在div或者p等标签内（行内元素可以嵌套在块级元素内部）

div标签

	div 标签，称为盒子。作用是设定内容的摆放位置。div 标签可以把文档分割为独立的、不同的部分。div 就相当于一个区域，我们把我们网页内容的都放在这个区域里面。

div的特点：

独占一行
支持align属性
可以设置宽度和高度
支持padding和margin
div 没有任何的默认样式，所以它不会像 P 标签和 H 标签一样，有上下间距
div 标签里面可以嵌套其他任意标签。
我们可以给某些单独的标签外层包裹一个 div，比如 img 标签，a 标签，这样方便我们后续为其设置样式。

元素的分类

块级元素（h1-h6、p、ul li、ol li、）
行内元素（）

单词的总结：

单词	释疑
width	宽度
height	高度
color	字体颜色
background-color	背景颜色
padding	内边距
margin	外边距
padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距
margin-top	上外边距
margin-bottom	下内边距
margin-left	左内边距
margin-right	右内边距
border	边框

边框有三个属性值： border：1px solid  red;
					  粗细1px  实线  红色
		                	  dashed（虚线）
		              		  dotted (点线)

补充(清除默认样式、文字居中)

*{
	padding:0px
	margin: 0px;
    /* 去点 */
    list-style: none;
}

li{
    height: 45px;
    /*让文字在竖直方向居中 行高的值等于高度 只针对一行 */
	line-height: 45px;  
	 /*让文字在水平方向居中 */
    text-align: center; 
    border-bottom:1px dashed grey ;
    }

标签加粗、样式加粗

 使用标签进行加粗，使用样式如何进行加粗
   标签：<b></b>或<strong></strong> 
   样式：font-weight：900

   使用标签进行倾斜，使用样式如何进行倾斜
   标签：<i></i>或<em></em>
   样式：font-style:italic
  
   使用标签进行下划线，使用样式进行天添加下划线，删除线
   标签：<s></s>
   样式：text-decoration：underline/line-through