Web应用基础HTML入门学习总结

最新推荐文章于 2024-07-21 17:58:14 发布

万亿.

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量91

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/Cwyyyyyyyyyy/article/details/115029431

版权

Web应用基础HTML入门学习总结

HTML是一种超文本标记语言，用于定义网页的内容及结构，HTML运行在浏览器上，由浏览器解析
注：此处使用的开发软件是VS Code 默认浏览器为Chrome

1. HTML的元素

HTML文件由一个一个元素组成，元素之间可以嵌套。
元素由开始标签、结束标签和内容组成。

2. HTML文件的构成

：这是注释符号。
<!DOCTYPE html>：声明文档类型是HTML。
<html></html>：<html>元素，根元素。整个页面的内容都包裹在里面，其他元素都嵌套在这个元素中。
<head></head>：<head>元素内一般包含一些想在搜索结果中出现的关键字、页面描述、CSS样式、字符集声明等。
<body></body>：<body>元素里就是网页的所有内容。
举个例子：

<!--注释内容-->
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>页面标题</title>
 </head>
 <body>
   <h1>我的第一个Web页</h1>
   <p>当前有点丑：)</p>
 </body>
 </html>

3. HTML的注释

：HTML的注释符号，符号内的内容将不会出现在网页中。

4. HTML的元素属性

属性包含元素的额外信息。
属性的构成：属性名称+“属性值”
如：

<p title="这是一个title属性">鼠标移上来将会浮现一个小标签</p>

接下来将在介绍标签时介绍一些属性。

5. HTML的标签

HTML标记的作用是注明标题、文本、区块、图片等内容。

<meta>：设置文档字符集编码方式。

如：

  <!--网页的编码方式为utf-8-->
  <meta charset="utf-8">

其中，charset是一个用来规定文档字符编码的属性。

<link>：引入其他文档或文件。

引入网页图标：

<link rel="shortcut icon" href="picture.ico" type="image/x-icon">

其中，rel属性用于描述目的地址（href）跟源（站点）之间的关系；herf属性规定了外部资源的地址；type属性指定元素类型。

<title>：设置页面标题。

  <title>网页标签标题</title>

<p>：文段（paragraph），这个标签用于包含一些想在网页中显示的文本内容。

  <p title="这是一个段落">将鼠标移到这行文字上将会浮现一个小标签</p>

设置了title属性的元素，当光标移动到其上时，信息提示框将显示title属性的值，title属性规定元素的额外信息。

<br>：这个标签代表换行符，出现这个标签时，网页内容将另起一行。
这个标签没有结束标签

  <p>换行<br>成功</p>

<hr>：插入这个标签后网页会出现水平分割线。

  <p>请输入：</p>
  <hr>
  <input>

<input>：插入这个标签后，网页中将会出现输入框。

  <input type="text">
  <input type="password">

type属性规定要显示的 <input>元素的类型。

<img>：这个标签用于插入图片。

  <img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

alt规定图像的替代文本。src规定显示图像的 URL。width规定图像的宽度。height规定图像的高度。

<a>：这个标签用于引入超链接。

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

href的属性的值为要跳转去的地址 URL
target属性值为_blank表示在新的页面打开超链接，默认打开方式是在当前页面，即target="_self"
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的

<h1>~<h6>：表示HTML中从大到小六级标题。标题的文本内容可以作为关键字被搜索引擎检索到。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<table>：表格标签。

<table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>

<tr>表格的行标签。
<td>表格行的单元标签。
<th>表格的表头标签。
12. 列表标签：

<ul>标签表示无序列表。无序列表使用<ul>标签，默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。

<!--实心圆点作为每项的标志-->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<!--方块作为每项的标志-->
<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>标签表示有序列表。有序列表使用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

<!--数字作为每项的标志-->
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<!--小写字母作为每项的标志-->
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<form>：表单标签。表单内录入的有效信息将提交到服务器。
当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>

<div>：区块。区块内的内容会独立显示，不会与其他内容处于同一行。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

<span>：以内联的方式显示内容。标签内的所有内容将会尽可能地在一行内显示。

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>

<pre>：预设格式。用于展示一些特别格式的文本，标签中的内容将保持不变。

<pre>有多          远，滚                         多远！</pre>

文本中出现的空格不会被自动忽略

万亿.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web应用基础HTML入门学习总结

目录Web应用基础HTML入门学习总结1. HTML的元素2. HTML文件的构成3. HTML的注释4. HTML的元素属性5. HTML的标签Web应用基础HTML入门学习总结HTML是一种超文本标记语言，用于定义网页的内容及结构，HTML运行在浏览器上，由浏览器解析注：此处使用的开发软件是VS Code 默认浏览器为Chrome1. HTML的元素HTML文件由一个一个元素组成，元素之间可以嵌套。元素由开始标签、结束标签和内容组成。2. HTML文件的构成：
复制链接

扫一扫