web前端学习之旅笔记01--HTML

web前端学习之旅笔记01--HTML

　　HTML最容易上手，但也易忘，实际开发中有时需要查阅官方文档，小伙伴们别忘了哟!

　　HTML 教程 (w3school.com.cn)

　　HTML是网页的骨架负责页面的结构，css负责表现，js负责行为

HTML概述：

　　HyperText Mark-up Language 意思是超文本标记语言，超文本指超链接，标记指标签，这个扩展名为.html或.htm的文本文件使用浏览器打开，被浏览器按标签描述渲染成网页，显示的网页可以跳转到对应的网页。

HTML基本结构：

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>

<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>

<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>

<!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
<meta charset="utf-8">

<!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
<title>网页的标题</title>

</head>

<!-- body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
<body>

<!-- h1网页的一级标题 -->
<h1>网页的大标题</h1>

</body>

</html>

HTML字符实体：
　　&nbsp 空格
　　&gt 大于
　　&lt 小于
　　<br/> 换行

HTML标签：
　　<div>块标签，无具体语义
　　<span>行标签，无具体语义
　　带样式标签
　　　　<em>行内元素，表示语气强调词，文字倾斜
　　　　<i>表示专业词汇，文字倾斜
　　　　<b>表示文档中的关键字或者产品名，文字加粗
　　　　<strong>表示非常重要的内容，文字加粗
　　语义化标签
　　　　<h1>标题
　　　　<p>段落
　　　　<ul><li>列表　
　　　　　
HTML图片
　　<img src="相对路径" alt="加载失败显示，盲人读屏文字显示"/>
　　./　　当前文件所在目录
　　../　　当前文件所在目录的上级目录

HTML链接
　　<a>在网页上定义一个链接地址
　　href属性：定义跳转地址
　　title属性：定义鼠标悬停提示
　　target属性：定义链接打开位置
　　　　“_self”:原位置打开
　　　　“_blank”:新开浏览器窗口打开
　　<a href="#">跳转到页面顶部<a>

HTML列表　　
　　在html中也可以创建列表，html列表一共有三种：
　　1、有序列表
　　2、无序列表
　　3、定义列表

　　无序列表，使用ol标签来创建无序列表
　　使用li表示列表项

　　无序列表，使用ul标签来创建无序列表
　　使用li表示列表项

　　定义列表，使用dl标签来创建一个定义列表
　　使用dt来表示定义的内容
　　使用dd来对内容进行解释说明

HTML表格
　　<table border="1" width="300" hight="100">//列
　　　　<tr>行
　　　　　　<td></td>//格子
　　　　</tr>
　　</table>

HTML布局
　　就是排版，传统布局即table布局（EDM邮件），现在流行HTML+css布局
　　下一篇做个 个人简历的传统table布局
HTML具体中文文档链接在下面哦！
HTML 教程 (w3school.com.cn)

posted @ 2021-06-20 13:08  BingeBlog  阅读(53)  评论(0)  编辑  收藏  举报