首页 > 代码库 > HTML基础

HTML基础

2024-08-27 04:48:06   219人阅读

 
 
  1. HTML
超文本标记语言、英文全拼：HyperText Markup Language。负责网页的语义描述。
  1. HTML基本骨架
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
</html>
Doctype：文本类型 如果仅写：html那么这代表是html5的网页类型，它符合w3c的标准。
Html：根目录标签，包含了网页的所有内容
Head：负责页面的属性配置，不做任何显示性内容操作。
Meta：翻译为“元”，代表基本属性。
Charset：字符集，它是告诉浏览器当前网页使用的是哪一种编码标准
能够支持中的编码有两种：
第一种utf8国际编码
第二种gb2312中文编码，中文的文本库加上外语的一些通用字符语言
Utf8编码>gb2312编码（文本库内容），utf8每个汉字占用3个字符，在gb2312种只占2个字符。
使用gb2312优点： 小，速度快！
以后我们的课程中一般就会使用utf8编码,因为我们懒，我就不想改！
注意：文本保存的编码格式一定要和页面内部声明的编码格式完全相同，不然会出现乱码！！！！
<meta name="keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信,数码,汽车,手机,财经,科技,相册"/>
Keywords：网页搜索关键字，搜索这些关键字可以找到我们的网页
    <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
Description：网页描述，提供给用户看到页面的介绍，利于搜索引擎优化（SEO）
Title：网页标题、搜索引擎优化。
Body：网页内容标签，他就是一个大的容器。我们所有语义化标签都在body中。
  1. HTML中基本的语法特性
  1. 在html中对换行以及缩进不敏感，但是一定要注意网页中结构的嵌套！
  2. Html中空白折叠现象，html文本中所有的换行、缩进、空格最终都会折叠为一个空格来展示。
  3. Html中标签一定要严格封闭。
  1. html中文本标签
  1. h1-h6标签，标题标签
  2. p标签：段落标签，一般只存放文本、图像或者a链接标签等。注意：p标签中不要放h标签。
  3. stong：文本加粗
  4. I：文本倾斜
  5. Em：文本倾斜
  6. Big：大字体标签
  7. Small：小字体标签
  8. Sup：添加文本上标
  9. Sub：添加文本的下标
从3-9为文本格式化标签，为了突出着重描述某个或某段字体。
  1. 图像标签
Img：英文全拼image-图像。
Src：英文全拼 source-来源路径，这个属性我们写图像的路径。
绝对路径：当前文件所在你计算机的完整路径。
相对路径：首先要有参照路径，参照路径就是当前html页面所在的文件路径。然后根据参照路径查找图片路径
 举例：参照路径：C:\Users\bever\Desktop\青岛-H5\课上代码\10.24
图片路径1：C:\Users\bever\Desktop\青岛-H5\课上代码\图片素材  答案：../图片素材/04.jpg
图片路径2：C:\Users\bever\Desktop\青岛-H5\课上代码\10.24\图片素材 答案：图片素材/04.jpg
图片路径3：C:\Users\bever\Desktop\青岛-H5\图片素材 答案：../../图片素材/04.jpg
Alt:提示属性，图片在不显示的情况下，给用户的提示文字。
Img标签在写路径时一定要加上扩展名，而且能够支持的图片类型有：jpg、jpeg、png、bmp、gif。 最好加上width和height属性，这是为了性能考虑。
  1. 锚点链接标签
a标签：超级链接标签，是联通各个页面之间的锚点。
Href属性：将要打开查看的链接地址。
Title属性：当鼠标悬停时的给用户看的提示文本。
Target属性：_blank设置链接打开时将使用新的页面
页内锚点：需要有两个a链接标签相互对应，并且其中之一的a链接需要设置name或者id属性
例如：
<a href="http://www.mamicode.com/#lsyg">查看历史沿革</a>
<h1><a name="lsyg">历史沿革</a></h1>
跨页面的锚点跳转，例子：
<a href="http://www.mamicode.com/04-页面内的锚点.html#bxtj">办学条件</a>
  1. 列表
无序列表：ul标签，里面包含着li标签。li标签代表的是每一项。
注意：li标签是不可以单独写的，必须嵌套在ul或者ol中.
有序列表：ol标签，和无序列表类似。
无序列表与有序列表的不同点：无序列表在页面中的语义是无序的，有序列表在页面中的语义是有顺序我们可以看的到的。
注意：ul或者ol中只能放li标签，但是li标签中可以放任何元素。
自定义列表：dl标签，里面包含了两个标签dt和dd。
dt标签：列表的小标题。
Dd标签：列表项。
快捷键：ul>li{li中显示的文本内容}*5
  1. table表
Table标签:表的语义
Tr：tablerow 行标签，代表一行
Td: 列标签，代表一列。
一般td标签被包含在tr标签中
Th：表中标题标签。
  1. Div
    Html中非常非常重要的一个标签，从我们单独拿出来说就足以看得出对它的重视。
在div标签中可以放任何的标签，包括div标签。
Span标签：普通的文本标签，是行内标签。它主要是给某段文字设置不同的演示，体现出文本的不同需求。
  1. 其他标签
Br标签：换行标签，
Hr标签：水平分割线
&nbsp; : 空格符号
&copy; 版权符号
  1. 添加标题的ICON
<link rel=”shortcut icon” href=http://www.mamicode.com/”aa.icon”>

HTML基础


联系
我们