HTML小白入坑日记~qwq
Web&HTML小白入坑の日记！（第二天）
（本博客参考百度百科以及其他网络，多处可能出现相似处！本人只为业余学习用途！若侵犯版权请联系本人删除！本人邮箱：[email protected]，本人IT小白！最近发现自己有很多误区和盲区若有IT大佬可否多指点一下qwq~望见谅！）
小白入坑日记目录
初识HTML
一般先学习 HTML + CSS 这里我们先定一个小目标, 先学 HTML 后学CSS
HTML (Hyper Text Markup Language 的缩写) 中文译为"超文本标签语言" , 主要通过 HTML 标签对网页的文本 图片 声音 等内容进行描述
今天先了解一下标签,html里边就是把写好字的标签贴上去.
其中标签可以理解成单标签和双标签两大类,他们的格式为:
单标签:<标签 />就形成一个单标签,
例如:
双标签:<标签>内容这样就形成一个双标签,
例如:...,...
也发现了一个道理,单标签只有一个则形成,双标签有始有终(必须)才能形成双标签.
标签内都会有相应的键,键中有相应的值,
采取键值对的格式 key = " value " 的格式,也就是这样的格式:
<标签名 键1 = "键1的值" 键2 = "键2的值" ...> 内容 标签名>例如:
<a href="http://www.baidu.com">百度一下a>
或者:
<meta charset="UTF-8">
在某些时候在标签可以包住标签,例如:
<p>这是一个<a>链接a>p>
HTML基本的语法差不多就这样了.
HTML 骨架格式
日常生活中的书信 我们要遵循一个共同的约定
同理 : HTML 有自己的语言语法骨架格式 :
<html>
<head>
<title> title>
head>
<body>
body>
html>
1.html 标签 : 作用所有的html中标签的一个根节点
2.head 标签作用 : 存放 title meta base style scirpt link 注意在 head 中我们必须要设置的标签是 title
3.title 标签 : 让页面拥有一个属于自己的标题
4.body标签作用 : 页面的主体部分 , 用于存放所有的 HTML 标签 如 p,h,a,u,i,s,em,del,ins,strong,img
HTML 标签关系
标签的相互关系就分为两种 :
- 嵌套关系
父子关系: <head> <title> title> head>
- .并列关系
<head>head>
<body>body>
- 文档类型
<!DOCTYPE>
这句话就是告诉我们使用哪个版本的 HTML HTML 有很多的版本 那我们应该告诉浏览器我们使用的版本号
标签位于文档最前面 , 用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范 必须在开头处使用标签为所有的XHTML文档指定XHTML版本和类型, 只有这样浏览器才能够按照指定的文档类型进行解析
注意 : 一些老的网站可能用的还是来老版本的文档类型比如 XHTML 之类的 , 但是我们学的是 HTML5 的文档类型 兼容性很好(向下兼容的原则),所以大家放心使用HTML5的文档类型就OK
字符集
<meta charset="UTF-8">
UTF-8是目前最常用的字符集编码方式, 常使用的字符集编码还有 gbk 和 gb2312
gb2312 简单中文 包括 6763个汉字
BIG5 繁体中文 港澳台等地使用
GBK 包含全部中文字符 是GB2312的扩展 加入对繁体字的支持 兼容 GB2312
UTF-8 包含全世界所有国家需要用到的字符
记住一点 , 以后我们统统使用 UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了
HTML 标签的语义化
- 方便代码的阅读和维护
- 同时让浏览器或网络爬虫可以很好的解析 , 从而更好的分析其中的内容
- 使用语义化标签会具有更好的搜索引擎优化核心: 合适的地方给一个最为合理的标签语义是否良好 : 当我们去掉CSS之后,网页结构依组织有序 并有良好的可读性不管是谁 都能看懂这块内容
遵循的原则 : 先确定语义的 HTML 在选合适的 CSS
标题标签
单词缩写: head 头部. 标题
为了使页面更具有语义化, 我们经常会在页面中用到标题标签 HTML 提供了6个等级的标题, 即
<h1> <h2> <h3> <h4> <h5> 和 <h6>
标题标签语义 : 作为标题使用 , 并且依据重要性递减
基本语法格式如下:
<hn> 标题文本 hn>
注意 : h1 标签因为重要 尽量少用 不要动不动就向你扔了一个h1 一般h1都是给logo使用
段落标签
单词缩写 : paragraph 段落
在网页中要把文字有条理的显示出来 离不开段落标签 如同我们平时写文章一样 整个网页也可以分为若干个段落
<p> 文本内容 p>
而段落标签就是 HTML 文档中最常见的标签 默认情况下 文本在一个段落中 会根据浏览器窗口的大小自动换行
水平线标签
单词缩写 : horizontal 横线
在网页中经常 看到一些水平线将段落与段落之间隔开 , 使得文档结构清晰 , 层次分明 . 这些水平线可以通过插入图片实现,也可以简单地通过标记来完成 ,
<hr />
在网页中显示默认样式的水平线
换行标签
单词缩写 : break 打断, 换行
在HTML中 , 一个段落中的文字会从左到右依次排列, 知道浏览器窗口的右端, 然后自动换行. 如果希望某段文字强制换行显示, 就需要使用换行标签
<br />
这时如果还像在 word 中直接敲回车换行就不起作用了
容器标签
div span 是没有语义的 是我们网页布局主要的两个容器
div 就是 divison 的缩写 分割,区分的意思 其实有很多的div来组合网页
span 跨度 跨距
范围语法格式:
<div> 这是头部 div> <span> 今日价格 span>
文本格式化标签
在网页中, 又是需要文字设置粗体 , 斜体 或下划线效果 , 这是就需要用到 HTML 中的文本格式化标记 是文字以特殊的方式显示
标签 : 文字以 粗体 显示 (XHTML推荐使用 strong)
标签 : 文字以斜体方式显示 (XHTML推荐使用em)
标签 :
标签 : 文字以加下划线方式显示 (XHTML不赞成使用u)
语义更加强烈
标签属性
属性就是特性 比如 手机的颜色 手机的尺寸 , 总结就是手机的…
使用HTML制作网页时, 如想让HTML标签提供更多的信息 可以使用HTML标签的属性加以设置 其基本语法格式如下 :
<标签名 属性1 = "属性值1" 属性2 = "属性值2" ...> 内容
在上面的语法中 ,
- 标签可以拥有多个属性, 必须写在开始标签中 位于标签后面
- 属性之间不分先后 标签名与属性 属性与属性之间均以空格分开
- 任何标签的属性都有默认值 省略该属性则取默认值
- 采取 键值对 的格式 key = " value " 的格式
比如 :
<hr width="400" />
属性 : 宽度
值 : 400
提倡 : 尽量不使用 样式属性
图像标签 img
单词缩写 : image 图像
HTML网页中任何元素的实现都要依靠HTML标签 , 要想在网页中显示图像就需要使用图像标签 , 接下来将详细介绍图像标签以及和他相关的属性 其基本语法格式如下 :
该语法中 src 属性用于指定图像文件的路径和文件名,他是 img 标签的必须属性
<img src="图像URL" />
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素(XHTML不支持%页面百分比) | 设置图像的宽度 |
| height | 像素(XHTML不支持%页面百分比) | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
链接标签
单词缩写 : anchor 的缩写 基本解释 锚, 铁锚 的
在HTML 中创建超链接非常简单 只需要标签环绕需要被链接的对象即可 其基本语法格式如下 :
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>
href : 用不指定链接目标的 url 地址, 当为标签应用 href 属性时 , 它就有了超链接的功能. Hypertext Reference 的缩写 意思是超文本引用
target : 用于指定链接页面的打开方式 其取值有 self 和 blank 两种 , 其中self为默认值, blank为在新窗口中打开方式
锚点定位
通过创建锚点链接 用户能够快速定位到目标内容
创建锚点链接分为两步 :
5. 使用"a href="#id名"链接文本/a"创建链接文本.a href="#nb"
6. 使用相应的id名标注跳转目标的位置 id = "nb"
base标签
base可以设置整体链接的打开状态 可以设置所有的都在新窗口打开 写在 标签中
<base target="_blank" />
特殊字符标签
HTML为这些特殊的字符准备了专门的替代
| 特殊字符 | 描述 | 一个普通标题 | 十进制编码 |
|---|---|---|---|
| 中等文本 | |
|
|
| < | 小于号 | < |
< |
| > | 短文本 | > |
> |
| & | 与号 | & |
& |
| ¥ | 人民币 | ¥ |
¥ |
| © | 版权 | © |
© |
| ® | 注册商标 | ® |
® |
| ° | 摄氏度 | ° |
° |
| ± | 正 | ± |
± |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
| ² | 上标2 | ² |
² |
| ³ | 上标3 | ³ |
³ |
注释标签
在HTML中还有一种特殊的标签----注释标签 如果需要在HTML文档中添加一些便于阅读和理解 但又不需要显示在页面中的注释文字 就需要使用注释标签 基本语法如下:
注释内容不会显示在浏览器窗口中 但是作为HTML文档内容的一部分 也会被下载到用户的计算机上 查看源代码时就可以看到.
现在大家也明白了基本图文标签了吧!
但是还有其他HTML带有特殊格式的标签!
好累QAQ~明天再继续看了吧!
小白入坑日记目录