Web学习第一天
程序员文章站
2022-04-29 22:38:23
...
HTML介绍
什么是HTML？
-
html是超文本标记语言(Hyper Text Markup Language)。
-
html是用于描述网页的一种语言。
-
html是一种标记语言(Markup Language)，但是不是编程语言。
-
标记语言是一套标记标签(Markup Tag)
HTML的作用？
简单来说，html就是用于展示信息的，通过Web浏览器读取html文件，并以网页的形式展示内容，浏览器都遵循一套html标签的原则，可以用来解释html文件上内容，并加以展示。
网页的组成
网页的内容组成
- Html用于展示我们需要展示的信息。
- Css用于美化我们的页面。
- Javascript使页面具有一定动态效果(交互效果)
静态页面和动态页面
静态页面就是编写以后再浏览器中不再改变的网页，比如html。
动态页面就是根据不同的情况显示不同的内容，如jsp等。
HTML的结构
- HTML文件的扩展名可以是 .html或者.htm。
- HTML文件不需要编译，直接用浏览器打开就可以。
- HTML由标签组成
- HTML标记标签，统称为HTML标签(html tag)。
- HTML标签是由尖括号<>包围起来的关键字，如<html><head><body>
- HTML不区分大小写
- 单标签：以/结尾的标签.如：<meta/><br/>，但有时候可以省略不写，如：<br>
- 双标签：有开始标签，有结束标签，如：<head></head>，HTML标签通常是成对出现的，第一个标签为开始标签，第二个标签为结束标签。
- 绝大多数标签都是有属性的，属性用引号引起来，如：<meta charset="utf-8"/>,<body text="red" id="body"></body>
- 大多数标签都可以嵌套。如：<table><tr><th></th></tr></table>
- HTML的内容结构
- 整个HTML文件都是在<html>和</html>之间。
- HTML标签之间有<head></head>，<body></body>。
- 头标签：<head>一般用引入一些脚本，样式的导入，设置编码格式，定义一些标题什么的</head>。
- 身体标签：<body>body中的内容会被浏览器显示出来</body>。
- HTML的数值默认单位为像素(px)。
HTML中的标签
h系列的标签(标题标签)
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>七级标题(如果写成h7就和普通文本一样了)</h7>
p标签(段落标签，会独占一行)
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>hr标签(分割线标签，会在页面上显示一条分割线)：size属性：水平线的高度 color:标签颜色
<hr color="blue" size="5px"/>span标签(显示文本，不会独占一行)
<span style="color:red;">span标签</span>
<span>文本内容</span>
<span>文本内容</span>div标签(普通标签，独自使用没有任何效果，主要用于网页中区域的划分，会独占一行)
<div style="border:1px solid blue;color:blue">
<span style="color:red;">span标签</span>
<span>文本内容</span>
<span>文本内容</span>
</div>标签的嵌套：font标签、b标签：加粗、i标签：斜体
<font color="#00FF00" size="5">字体</font>
<font size="7px">字体</font>
<font>2<sup>3</sup></font>
<font>H<sup>2</sup>0</font>
<font><b>字体加粗</b></font>
<font><i>字体倾斜</i></font>a标签
- 超链接标签，不会独占一行。
- href属性，指定点击后跳转的URL，想让点击没反应，href要写成javascript:void(0)；
img标签
- 显示图片的标签，不会独占一行。
- src属性，路径，路径问题有绝对路径和相对路径，在接下来的博客中会讲到。
- alt属性：图片无法显示的时候，显示该文字。
- width属性：设置宽度，可以是像素值，也可以是百分比。
- height属性：设置高度，可以是像素值，也可以是百分比。
- title属性：鼠标移上去的时候显示图片的名字
<img src="HelloKitty1.jpg" alt="找不到了...."/><br/>
<img src="HelloKitty.jpg" alt="找不到了...." title="萌萌哒"/><br/>
<img src="HelloKitty.jpg" title="小小版萌萌哒" height="10%"/><br/>
<a href="http://www.baidu.com" target="bd"><span>*百度</span></a><br/>
<a href="javascript:void(0)>点我没反应</a>ol标签
有序列表，是组合标签，ol内部嵌套li标签。 type属性：取值范围："A"，"a"，"I"，"i"，"1"。
ul标签
无序列表，是组合标签，ul内部也嵌套li标签。 type属性：取值范围:disc(实心圆)，circle(空心圆)，square(方块)
li标签
定义列表项目,用在ol和ul中。
<!-- 空心圆 -->
<ul type="circle">
<li>
<a href="https://www.henandaily.cn/" target="bd">河南日报</a>
<!-- 实心矩形 -->
<ul type="square">
<li>生活</li>
<li>交通</li>
<li>娱乐</li>
</ul>
</li>
</ul>
<!-- 默认disc实心圆 -->
<ul type="disc">
<li>
<a href="https://http://www.huanqiu.com/" target="bd">环球时报</a>
<ul type="square">
<li>生活</li>
<li>交通</li>
<li>娱乐</li>
</ul>
</li>
</ul>
爱好：
<ol type="A">
<li>编程</li>
<li>足球</li>
<li>音乐</li>
</ol>iframe标签
- iframe标签会创建包含另一个文档的内联框架(就是行内框架)。
- Name属性：指定iframe的名字，如果a标签中的target属性值是iframe的name属性值的时候，点击a的时候，对应链接内容会出现在对应的iframe中。
- src属性：是iframe中显示内容的链接。
- width属性：表示宽度。
- height属性：表示高度。
- Scrolling属性：取值为yes(显示滚动条)，no(不显示滚动条)，auto(自动的)。
- framedorder属性：取值为0(不显示边框)，1(显示边框，默认值)。
<a href="http://www.baidu.com" target="bd">百度</a>
<iframe name="bd" width="1000px" height="800px" scrolling="auto" frameborder="0"></iframe>table标签、th标签、td标签
表格标签table是组合标签，内置了很多子标签。
- <table>父标签，相当于一个表格的容器。
- <caption>表格的标题，写在table内第一行，用于指定表格的标题，会显示在表格的正上方。
- <tr>表示表格的一行。
- <th>表示表格的每一列的标题，写在<tr>里边(是一个加粗的td)。
- <td>表示表格的每一个单元格，写在<tr>里边。
<table border="2px">
<caption>普通表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>薪水</th>
</tr>
<tr>
<td>蓝色飞鸟</td>
<td>22</td>
<td>999999</td>
</tr>
</table>上一篇： 标签系统