web前端基础复习_day01_HTML

最新推荐文章于 2024-08-07 22:13:00 发布

孟庆杰

最新推荐文章于 2024-08-07 22:13:00 发布

阅读量235

点赞数 1

分类专栏： web前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_42931689/article/details/104448286

版权

web前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

HTML

一. 概念

Hyper Text Markup Language 超文本标记语言
主要控制页面的布局结构

① 超文本:

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

② 标记语言:

由标签构成的语言。<标签名称> 如 html，xml
标记语言不是编程语言

二. 基本语法

1. html文档

html文档后缀名 .html 或者 .htm

2. 标签

① 分类

双边标签 : 有开始标签和结束标签。如 <html> </html>
单边标签: 开始标签和结束标签在一起。如 <br/>

② 标签的嵌套

需要正确嵌套，不能你中有我，我中有你
错误：<a><b></a></b>
正确：<a><b></b></a>

③ 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

④ html的标签不区分大小写，但是建议使用小写。

3. 结构

<html>
		
	<head>
		<meta charset="UTF-8">
		<title>title</title>
	</head>
	
	<body>
		页面内容显示区
	</body>

</html>

4. 文本修饰标签

<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sub></sub> 下标
<sup></sup> 上标

5. 排版标签

<p></p> 段落标签
<br/> 换行标签
<hr/> 水平线标签
<pre></pre> 预排版标签(将保留所有的空白字符)
<h1></h1>… <h6></h6> 标题标签, h1到h6字体依次减小
<div><div/> 代表一个块元素, 没有任何意义, 一般与CSS配合使用
- 块元素: 一般是单独占一行, 不管内容多少, 总是占一行
<span><span/> 代表一个行内元素, 没有任何意义, 一般与CSS配合使用
- 行内元素: 一般不会单独占一行, 多个行内元素会排列在同一行上
实体字符
-   代表一个空格
- < 代表一个小于号 <
- >代表一个大于号 >
- & 代表一个and符 &
- ¥ 代表一个人民币符号 ¥
- × 代表一个称号 ×
- ÷ 代表一个除号 ÷

注意: 在标签嵌套时, 一般是块元素嵌套行内元素

<p align="center">这是第一段</p>
<p>这是第二段</p>
<div>这是一个块元素</div>
<span>这是第一个span标签</span>
<span>这是第二个span标签</span>
<br/>
<span>这是第三个span标签</span>
<hr/>
<h1>这是h1</h1>
<h2>这是h2</h2>

6. 项目列表标签

① <ul><li></li></ul> 标签

无序列表, 没有编号
常用属性: type= “disc”(黑点) || “circle”(空心圆) || “square”(实心方块)

<ul type="circle">
    <li>华为</li>
    <li>苹果</li>
    <li>三星</li>
</ul>

② <ol><li></li></ol> 标签

有序列表, 有编号
常用属性: type : 编号类型; start: 从第几个开始编号.

<ol>
    <li>移动</li>
    <li>联通</li>
    <li>电信</li>
</ol>

7. 图片标签

① 语法格式
<img src="" alt="" 属性=值>
② 常用属性：

src：指定图片的路径
width: 图片的宽度
height: 图片的高度
border: 边框的粗细
alt: 当图片加载失败时, 显示的文本
align: 图片的水平对齐方式
hspace: 图片与左右文字的距离
vspace: 图片与上下文字的距离

8. 超链接标签

① 语法格式
<a href="" 属性=值>超链接</a>

② 常用属性

href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式
- _blank: 表示在新窗口中打开目标文件
- _self: 默认值，在当前窗口中打开文件
- _parent: 在父级窗口中打开文件

③ 空链接

href = "#"; 跳转到当前页面
href = "javascript: void(0);" 不跳转

④ 特殊链接

下载链接: href 指向文件的地址, 浏览器不能解析, 则会提示下载;
邮箱链接: <a href="mailto: a123@163.com">请给我发邮件</a>

⑤ 锚点链接

含义: 一个网页的不同区域进行跳转
定义锚点:<a name="java">java</a>
跳到锚点: <a href="文件名#java">跳到java</a>

9. 表格标签

① 语法格式

<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>01</td>
        <td>张三</td>
    </tr>
    </tbody>
</table>

② <table>：定义表格

width：宽度
border：边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
bgcolor：背景色
align：对齐方式

③ <tr>：定义行

bgcolor：背景色
align：对齐方式

④ <td>：定义单元格

colspan：合并列
rowspan：合并行

⑤ <th>：定义表头单元格

⑥ <caption>：表格标题
⑦ <thead>：表示表格的头部分
⑧ <tbody>：表示表格的体部分
⑨ <tfoot>：表示表格的脚部分

孟庆杰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端基础复习_day01_HTML

HTML一. 概念Hyper Text Markup Language 超文本标记语言主要控制页面的布局结构① 超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本② 标记语言:由标签构成的语言。<标签名称> 如 html，xml标记语言不是编程语言二. 基本语法1. html文档html文档后缀名 .html 或者 .ht...
复制链接

扫一扫

专栏目录