萌新之HTML

最新推荐文章于 2024-06-14 14:36:26 发布

Taylor swift是我的爱豆

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量639

点赞数

分类专栏： html 新手文章标签： html html5 前端

本文链接：https://blog.csdn.net/m0_46614313/article/details/106224193

版权

html 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

新手

4 篇文章 0 订阅

订阅专栏

我的第一个ＨＴＭＬ

<html>
  <body>
    <p>Hello HTML</p>
  </body>
</html>

HTML是Hyper Text Markup Language 超文本标记语言的缩写。
HTML是由一套标记标签（markup tag）组成，通常就叫标签，
双标签由开始标签和结束标签组成，单标签顾名思义用一个就行。
上面的代码中，ＨＴＭＬ始终以＜ｈｔｍｌ＞开头＜／ｈｔｍｌ＞结尾
＜ｂｏｄｙ＞＜／ｂｏｄｙ＞这是身体也就是内容部分
＜ｐ＞ 就是一个开始标签
＜／ｐ＞这是一个结束标签

ＨＴＭＬ属性

属性用来修饰标签的，通常放在标签里
比如要设置一个段落居中
<ｐ align="center">居中标题</ｐ>
写在开始标签里的 align=“center” 就叫属性
align 是属性名
center 是属性值
属性值应该使用双引号括起来
除个别特殊元素外，几乎所有元素都具有属性。

ＨＴＭＬ注释

在ＨＴＭＬ中使用 进行，注释通常用在解释代码的含义作用等。

基本元素

常用标签-标题

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题5</h6>

常用标签-段落

<p>段落1</p>

该标签即表示段落，p是paragraph的缩写，在p标签中的文本会自动换行，不在p标签中的，不会自动换行。
另外换行也有专用的标签：<br/>

常用标签-预格式

预格式即需要在网页上显示代码时用到的pre，没有用预格式的情况下网页的代码就会连接在一起
如下图所示，该图为没有用＜ｐｒｅ＞预留格式标签下的显示
如图所示，该图为没有用＜ｐｒｅ＞预留格式标签下的显示
如图所示，该图用＜ｐｒｅ＞预留格式标签下的显示
如图所示，该图用＜ｐｒｅ＞预留格式标签下的显示

常用标签-块/留白

<div> 
<span>

常用标签-删除标签

<del>删除的内容</del>
<s>不建议使用，很多浏览器不支持s标签</s>

运行后：~~删除的内容~~
运行后：~~不建议使用，很多浏览器不支持s标签~~

常用标签-下划线

<ins>ins下划线标签</ins>
 <u>u也是下划线标签，不建议使用</u>

运行后：ins下划线标签
运行后：u也是下划线标签，不建议使用

常用标签-图像

<img src="图像路径"/>

如果是本地文件，只需把图片放在同一个目录下即可
src直接使用文件名，不需要/
图片在上级目录，则在src上加上 …/，即可访问上级目录的图片
如果是在上级目录的上级目录，则使用 …/…/
src使用图片所在的绝对路径，并在前面加上file://
img不能够自己居中，需要放在其他能够居中的标签中实现这个效果，比如h1标签,p标签.
经常采用的手段是放在div中居中
如果图片不存在，默认会显示一个缺失图片，这里可以加上alt属性进行解释图片。

<img src="图像路径" alt="图片不在时，显示这段文字" />

常用标签-超链接

<ａ>标签即用来显示超链


<a href="跳转到的页面地址">超链显示文本</a>

其“target”属性；target的语法有-blank（在新窗口中打开）、-parent（将要链接的文件载入含有框架的父框架集或者窗口中）、-self（在同一窗口中打开链接文档）、-top（在整个浏览器窗口中打开链接文档，同时删除所有框架）

<a href="http://www.baidu.com" title="百度">百度的网址链接</a>

上面代码的链接中会显示出“百度”，标签中的title为链接提供了显示信息。

<a href="http://www.baidu.com">
<img src="图像路径"/>
</a>

这里可以用图片来当链接，即点击图片实现跳转。

常用标签-表格

<table>
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>
 
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
 
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
 
</table>

运行后：

1	2
3	4
a	b

上述代码中，<table></table>为表格的意思，表格里面的tr元素为行标签，td为列标签，第一个tr元素为第一行，tr里面的第一个td为第一行第一列，tr里面的第二个td为第一行第二列，以此类推。

常用标签-列表

列表分无序列表和有序列表还有自定义列表。
分别用<ul>标签，<ol>标签和<dt>表示

<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
</ul>

运行后：

无序列表元素1
无序列表元素2

<ol>
<li>有序列表元素1</li>
<li>有序列表元素2</li>
</ol>

运行后：

有序列表元素1
有序列表元素2

<dl>
<dt>定义列表元素1</dt>
<dd>定义列表元素1.1</dd>
<dt>定义列表元素2</dt>
<dd>定义列表元素2.1</dd>
</dl>

运行后：

定义列表元素1

定义列表元素1.1

定义列表元素2

定义列表元素2.1

这两种标签都是布局用的，这种标签本身没有任何显示效果

通常是用来结合css进行页面布局（后面讲css会提及）

常用标签-字体（粗体/斜体）

上面说了除个别特殊元素外，几乎所有元素都具有属性，下面重点说下字体的属性，如果单单为了表示粗体，可以用<b> 和<strong>标签，斜体可用<i>和<em>

<b> 粗体效果
<strong> 粗体效果，强调语义上的加重，提醒用户该文本的重要性。

运行后：
粗体效果
粗体效果，强调语义上的加重，提醒用户该文本的重要性。

<i>斜体效果</i>
<em>强调语义上的加重，提醒用户该文本的重要性</em>

运行后：
斜体效果
强调语义上的加重，提醒用户该文本的重要性

常用标签-内联框架

<iframe> 即内联框架标签（有点套娃的意思）

<iframe src="网页路径" ></iframe>

iframe相当于浏览器里面有个小浏览器，在这个小浏览器里，打开另一个网页。通过内联框架可以实现在网页中“插入”网页

表单元素

文本框
<input type="text"> 即表示文本框，在 HTML 中，<input> 标签没有结束标签。
并且<input>只能够输入一行，如果要输入多行，使用文本域<textarea>
密码框
<input type="password"> 即表示密码框，在密码框中输入的数据会自动显示为星号。
表单
表单标签<form>用于向服务器提交数据，比如上面的账号和密码
单选框
<input type="radio" > 表示单选框
复选框
<input type="checkbox"> 即表示复选框
下拉列表
<select> 即下拉列表
需要配合<option>使用，<option>表示列表里面可选的元素
文本域
<textarea> 即文本域
与文本框不同的是，文本域可以有多行，并且可以有滚动条
按钮
<button></button>即按钮标签
与<input type="button">不同的是，<button>标签功能更为丰富，按钮标签里的内容可以是文字也可以是图像，如果button的type=“submit” ，那么它就具备提交form的功能