HTML标签及其属性认识

最新推荐文章于 2025-05-08 16:51:21 发布

原创最新推荐文章于 2025-05-08 16:51:21 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

html+css 专栏收录该内容

6 篇文章

订阅专栏

1.掌握HTML文档结构
2.掌握HTML标签及其属性的写法。
3.掌握常用标签的使用

1.建议读者每完成一部分的代码，都要用浏览器查看效果，在过程中感受HTML标记的神奇。
2.制作项目时认真体会页面的布局、不同HTML标记的语义及属性。
3.编辑代码过程中，出现问题不要担心，可以检查是否有错误字符、标点符号、空格等问题，重在体验，保持正能量才能更好的完成哦！

####HTML文档基本格式
html是一门描述性语言，主要用来描述网页中的文字和图像等信息。即向浏览器描述网页长什么样！！！
html文档的基本格式如下

<!DOCTYPE html>

<html>
<head>
    <title>无标题文档</title>
</head>

<body>
</body>

</html>

<!DOCTYPE html>：文档类型声明
<html>：根标记
<head>：头部标记
<body>：主体标记

文档结构必须要严谨，不能随意改动结构逻辑，制作网页主要操作的地方为head及body标记内部。

####html标签格式

元素标签格式： <标签名称/>
修饰标签格式： <标签名称>被修饰的内容 </标签名称>

标签名称建议使用小写
元素标签：其本身真实显示在网页上
修饰标签：其仅仅作为包裹其他内容的的容器，起到修饰的作用。

【案例】如下代码，编写后记得在浏览器中查看哦！！！

<h1>这是一个一级标题</h1>
<h5>这是一个五级标题</h5>
<h5>这还是一个五级标题</h5>

<span>梅西短期内不会重返阿根廷国家队</span>

<p>面对老对手马竞，皇马最终还是没能跨过这道坎，他们以2-4的比分，输给了自己的老对手。
如果说过去皇马在输给马竞之后，还可以苦笑着，说自己球队身价比马竞高的话，那么这次
他们连这个机会都没有了。</p>

####html标签属性
属性：用来描述标签的性质。

标签属性格式： <标签名称属性1=“属性值1” 属性2=“属性值2” ……/>
标签属性格式： <标签名称属性1=“属性值1” 属性2=“属性值2” ……>被修饰的内容 </标签名称>

属性总是以名称/值对的形式出现
属性可能存在多个，多个属性之间用空格隔开
不同标签拥有的属性可能不同

【案例】如下代码，编写后记得在浏览器中查看哦！！！

<h1>这是一个一级标题</h1>
<h5>这是一个五级标题</h5>
<h5 align="center">这还是一个五级标题</h5>

<span style="font-size:36px">梅西短期内不会重返阿根廷国家队</span>

<p>面对老对手马竞，皇马最终还是没能跨过这道坎，他们以2-4的比分，输给了自己的老对手。
如果说过去皇马在输给马竞之后，还可以苦笑着，说自己球队身价比马竞高的话，那么这次
他们连这个机会都没有了。</p>

嵌套元素

你也可以把元素放到其它元素之中——这被称作嵌套。如果我们想要表明我们的小猫脾气很暴躁，可以将**“非常”**嵌套在<strong> 中，意味着这个单词被着重强调

<p>我的猫 <strong>非常</strong> 生气.</p>

你需要确保元素被正确的嵌套，下面的例子（交叉）是错误的：

<p>我的猫 <strong>非常生气.</p></strong>

####块级元素和内联元素
在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。

块级元素在页面中以块的形式展现 —— 相对与其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。
内联元素不会导致文本换行。

<em>一</em><em>二</em><em>三</em>
<p>四</p><p>五</p><p>六</p>

如上例子，p是块级元素，em是内联元素，效果如下图

这里写图片描述

####html头部标记
头部标记的内容并不显示在网页内容中，仅仅作为相关信息反馈给浏览器。常见头部设置方法及其说明，这些标记不一定要全部写完，按需使用即可。

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->
    <meta name="keywords" content=""/> <!-- 页面关键词 -->
    <meta name="author" content="name, email@gmail.com" /> <!-- 网页作者 -->
    <meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->

    <!-- 为移动设备添加 viewport -->
    <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
    <meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->

    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->

    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

    <title>标题</title>
</head>