HTML
什么是HTML
- HTML
- Hyper Text Markup Language(超文本标记语言)
HTML发展史
HTML 5，提供了一些新的元素和一些有趣的新符性，同时也建立了一些新的规则，这些元素、特性和规则的尖子，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像、和动画，以及不需要安装任何插件直接使用网页播放视频等。
W3C标准
- W3C
- World Wide Web Consortum (万维网联盟)
- 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
- W3C标准包括
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
HTML基本结构
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
//网页头部
<body>
</body>
//主体部分
</html>
; 意为用/来关闭空元素
网页基本信息
DOCTYPE声明
网页基本标签
-
标题标签
<h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> -
段落标签
<p>由于第一次安装这个环境，</p> <p>扯了挺久了，弄好了，高进记录一下，避免以后还需要</p> <p>下面链接是npm官方的安装</p> <p>https://www.npmjs.com/package/windows-build-tools</p> -
换行标签
<br> -
水平线标签
<hr> -
字体样式标签
粗体：<strong>i love you</strong> 斜体：<em>i love you</em> -
注释和特殊符号
注释<!-- --> 空格 空 格 <br> 大于> <br> 小于< ©版权所有
图像标签
常见的图像格式
- JPG
- GIF
- PNG
- BMP
<img src="path" alt="text" title="text" width="x" height="y"
- src:图像地址 alt：图像的替代文字 title:鼠标悬停提示文字 width:图像宽度 height:图像高度
链接标签
<a href="path"target="目标窗口位置">链接文本或图像</a>
- href="path"链接路径 target链接在哪个窗口打开 常用之：_self\blank
-
文本超链接
-
图像超链接
-
超链接
-
页面间链接
-
从一个页面链接到另一个页面
-
-
锚链接
<a name="top">顶部</a><a href="#top">回到顶部</a> -
功能性链接
<!--功能性链接 邮件链接：mailto --> <a href="mailto:2820678041@qq.com">点击联系我</a> <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </body>
行内元素和快元素
- 块元素
- 无论内容多少，该元素独占一行
- (p、h1-h6)
- 行内元素
- 内容撑开宽度，左右都是行内元素的可以在排在一行
- (a.strong.em)
列表
-
什么是列表
- 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息
-
列表的分类
-
无序列表
-
<!--无序列表--> <ul> <li>java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/c++</li> </ul> -
有序列表
-
<!--有序列表 应用范围：试卷，问卷.... --> <ol> <li>java</li> <li>Python</li> <li>运维</li> <li>前端</li> <li>C/c++</li> </ol> -
自定义列表
-
<!--自定义列表 dl:标签 dt：列表名称 dd：列表内容 公司网站底部 --> <dl> <dt>学科</dt> <dt>Java</dt> <dt>Python</dt> <dt>Linux</dt> <dt>C</dt> <dt>位置</dt> <dt>河北</dt> <dt>河南</dt> <dt>山西</dt> </dl>
-
表格
-
为什么使用表格
- 简单通用
- 结构稳定
-
基本结构
- 单元格
- 行
- 列
- 跨行
- 跨列
<!--表格table 行 tr rows 列 td --> <table border="1"> <tr> <!--colspan 跨列--> <td colspan="4">1-1</td> </tr> <tr> <!--colspan 跨行--> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> <td>2-3</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> </tr> </table>
页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于叶敏或页面重点一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
转载：https://blog.csdn.net/zq140311/article/details/115558622
查看评论