HTML5学习笔记（一）

最新推荐文章于 2024-07-25 11:52:08 发布

简澈

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量234

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_45736769/article/details/113342992

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：

本文记载的是学习HTML时根据书本记录的一些知识点，若有不当之处望指出，愿与大家共同进步。
附一份参考链接：HTML标签参考手册

一、基本结构

<!doctype html>
    <html>
    <head>
        <meta http-equiv="Content-Type" Content="text/http; charset=utf-8"/>
        <title>网页标签内容</title>
        <style>
        ·······
        </style>
    </head>
    <body>
    ······
    </body>

二、网页中的文字和段落

< h>标签

功能:用于制作大小不同的标题，从h1到h6标题大小依次减小。
用法:< h1>标题内容< /h1>，放在body标签下。

< p>标签

功能:用于定义段落。
用法:< p>段落内容< /p>，放在body标签下。

< font>标签

功能:设置字体的大小、颜色和类型。
属性:color、size、face(字体类型，如楷体，尽量用常见字体)
用法:< font>内容< /font>，放在body标签下。

< b>标签

功能:加粗文字
用法:< b>需要加粗的内容< /b>

< u>标签

功能:给内容添加下划线。
用法:< u>需要加下划线的内容< /u>

< br>标签

功能:给文字换行。
用法:< br>下一行内容，或者：上一行内容< br/>
注意:< br>是空标签，即无结束标签(< br>< /br>则错误)

< nobr>标签

功能:不让文字换行。
用法:< nobr>不需要换行的内容< /nobr>

< strike>标签

功能:绘制删除线。
用法:< strike>需要添加删除线的内容< /strike>，或者< s>内容< /s>

align属性

功能:设置文字、图片等元素的对齐方式。
属性值：left(默认)、right、center
用法:放在< h>< p>< img>标签里面。

二、网页中的图片样式

< img>标签

src：指定图片的URL
alt：图片出问题的时候的替换文字
title：网页未加载完图片或鼠标停留时的提示文字
width：设置图片的宽度
height：设置图片的高度
border：设置图片边框的粗细
hspace：设置图片间的水平间距
vspace：设置图片间的垂直间距

在这里插入图片描述

三、表格布局网页

< table>标签

功能:创建表格
用法:< table>···< /table>，放在< body>标签下。

< caption>标签

功能:给表格设置标题。
用法:< caption>表格的标题< /caption>，放在< table>标签内。

< tr>标签

功能:设置表格的行标记。
用法:< tr>行内容< /tr>，放在< table>标签内。

< td>标签

功能:设置表格的单元格标记。
用法:< td>单元格内容< /td>，放在< /tr>标签内。

< th>标签

功能:设置表格的表头。
用法:< th>表格的表头内容< /th>，放在第一个< /tr>标签内。

表格属性(放在table标签里面)

border：设置表格边框的粗细。
bordercolor：设置表格边框的颜色。
cellspacing：设置单元格之间的间距。
cellpadding：设置的文字与边框的间距。
background：设置表格的背景图片。

表格行属性(放在tr里面)

height：设置表格行高度。
bgcolor：设置表格行背景色(会被单元格的颜色覆盖)。
align：设置行内文字水平对齐方式(left、center、right)
vlign：设置行内文字垂直对齐方式(top、middle、bottom)

表格单元格属性(放在td里面)

height：设置单元格的高度。
width：设置单元格的宽度。
bgcolor：设置单元格的背景色。
bordercolor：设置单元格边框颜色。
colspan：合并水平单元格（列相邻单元格）。
rowspan：合并垂直单元格（行相邻单元格）。

四、列表

ul列表（无序列表）

用法： 其中type的值可为disc(实心圆(default))、circle(空心圆)、square(实心正方形)。

<ul type=符号类型>
	<li>第1项<li>
	<li>第n项<li>
</ul>

menu列表（菜单列表）

和ul列表类似，把ul换成menu即可。

ol列表（有序列表）

用法： 其中type的值可为1(数字(default))、a(字母)、Ⅰ(落马数字)。其中start可以设置序号起始值。

<ol type=符号类型 start=起始数值>
	<li>第1项<li>
	<li>第n项<li>
</ol>

dl列表（定义列表）

用法：< dt>后面是要解释的名词，< dd>后面是解释。

<dl>
	<dt>名词</dd>解释
	<br/>
	<dt>名词</dd>解释
	<br/>
或者
	<dt>名词</dt>
	<dd>解释1</dd>
	<dd>解释2</dd>
或者
	<dt>
		名词
		<dd>解释1</dd>
		<dd>解释2</dd>
	</dt>
</dl>

dir列表（目录列表）

不推荐使用

注:列表之间可以嵌套使用。

五、超链接

用法：

<a href=链接目标的url target=目标窗口的打开方式>

其中目标链接的url可以是其他html的文件路径，也可以是网页链接的url。
其中目标窗口的打开方式属性值 可以为 _self、_blank、_top、_parent。

简澈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记（一）

文章目录前言：一、基本结构二、网页中的文字和段落< h>标签< p>标签< font>标签< b>标签< u>标签< br>标签< nobr>标签< strike>标签align属性二、网页中的图片样式< img>标签三、表格布局网页< table>标签< caption>标签< tr>标签< td>标签< th>标签表格属性(放在table
复制链接

扫一扫