黑马程序员技术交流社区

标题: HTML基础知识 [打印本页]

作者: aqwx998 时间: 2019-7-24 11:26
标题: HTML基础知识
本帖最后由 aqwx998 于 2019-7-24 11:27 编辑

HTML常用标签及属性
概念：HTML是超文本标记语言，不是编程语言。
结构：

C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7Vjnx3E0RIGKsJxA9cKcschpg/0f12b4e72f88446c81feaba3c71170a6/671cec30d55146bf9b4404d21f3bf5ba.jpg
head 标签里面的内容是给浏览器解析的，用户只能看到title标题；
body 标签里面的内容是给用户看的；

标签分类
双标签：由开始标签<开始标签>和结束标签</结束标签>组成；
例如：<html></html> <body></body> <head></head>

单标签: 不需要包含内容，直接在开始标签最后面添加一个结束的符号 / ;
例如： <hr />

html结构介绍

C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7Vjnx3E0RIGKsJxA9cKcschpg/71f717800fcb402ba2af6466f97b6ade/clipboard.png

<!DOCTYPE html>
让浏览器用H5的标准来解析代码

语言：lang="en"
当前网页所在国家的语言，一般en表示英文，zh-CN 表示中文

字符集：<meta charset="UTF-8">
用来对我们书写的字符进行对应国家文字的编译

标签的语义化的目的
语义化标签让代码结构更清晰，方便代码的阅读和维护，也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容，更好得到优化网站的搜索引擎

标题标签：从h1到h6分为6个级别，分别是h1/h2/h3/h4/h5/h6作为标题使用，并且依据重要性递减；

注意：
01、标题标签默认加粗，独自占一行，双标签；
02、h1标签一般情况下一个页面最好出现一次，并且放logo最好，h2标签一个页面最多使用两次，h3-h6标签可以多次重复出现

关于浏览器对空格和回车换行的解析
浏览器在解析代码的时候，只会解析一个空格不管输入多少个空格，对于回车换行直接是不解析或者解析成一个空格，所以我们在书写换行效果的时候书写换行用 ，空格用书写即可；

段落标签p
段落标签p，双标签，可以清楚得到划分页面的段落；

div和span标签
div标签布局标签，主要是布局用的大标签也是主要标签;
特点：没有语义，独占一行；
span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；
特点：没有语义，一行共存多个；

文本格式化标签
加粗标签:单纯的加粗 语义化强调
倾斜标签:单纯的加粗 语义化强调
删除线标签:<s>单纯的加粗</s> <del>语义化强调</del>
下划线标签:单纯的加粗 <ins>语义化强调</ins>

图片标签img
img标签,单标签，<img />,必须配合src属性将图片引入html页面，<img src=“图片路径” />

图片的常见属性
src 属性值 --- url 图像路径
alt 属性值 --- 自定义文本图像不能正常显示的时候替换文本；
title 属性值 --- 自定义文本鼠标移入图片显示提示文本；
width 属性值 --- 自定义数值设置图片的宽度；
height 属性值 --- 自定义数值设置图片的高度；

注意：
01、我们在给图片设置宽高的时候只能设置一个，让另外的一个自适应；
02、设置图片宽高的时候要写单位px。

超链接a标签（双标签）
作用
实现页面之间的相互跳转

<a href=”链接路径”> </a>

target 用于指定链接页面的打开方式，属性值我们一般选择新窗口打开 _blank

C:/Users/Administrator/AppData/Local/YNote/data/weixinobU7Vjnx3E0RIGKsJxA9cKcschpg/a779843659ee4050a0cf600867617f21/clipboard.png

href的取值：一般是放跳转的目标路径，如果我们不知道要跳到什么地方，就直接书写一个#表示空链接；

超链接的链接方式：
外部链接（在线链接）：直接在href=“http://+要访问的网址”，注意http://必须书写；
内部链接： 直接在href=“书写html页面名称”，注意在书写内部链接的时候要书写清楚页面的路径；
空链接：如果不知道要链接到什么地方，我们就暂时用#代替即可；
其他链接：我们不仅仅能给文字添加链接，我们还可以给其他的网页元素添加链接，例如：图像、表格、音频、视频等；

锚点定位
作用：实现页面内部的跳转：
添加锚点效果：
01、确定要跳到什么位置 ---- 使用id名标注要跳转到的目标位置（锚点目标）；
02、使用超链接a进行锚点按钮设置，<a href=“#id名称”>链接文本</a>

base标签(单标签）
base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间
如：<base target="_blank">

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2