始于Web页面的HTML网页

最新推荐文章于 2022-03-24 11:16:30 发布

yuminglc

最新推荐文章于 2022-03-24 11:16:30 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/vic_to_ry/article/details/115335983

版权

1、HTML简介

HTML是超文本标记语言的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。HTML定义了网页内容的含义和结构。
除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。

2、HTML结构

1、使用工具：VScode
安装VScode，初步学习使用VScode。
2、创建一个以“.html”格式结尾的文件。
在这里插入图片描述 3、文件中填写内容。可以入下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>my first web 页面</h1>
  <p>内容欠缺：)</p>
</body>
</html>

4、在VScode中添加插件：live server。
在这里插入图片描述
5、从本地html文件转到web页面。

3、HTML 文档结构分析

HTML元素（elements）
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>等等。

检查我们刚创建的 HTML 文档你会发现，整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。

对部分代码进行解释：
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
<head></head>: <head>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。

4、文档说明

注解：在VScode代码编辑页面，选中代码行，使用ctrl+/即可表示注解。
注意：HTML 不区分标签的大小写，但建议全部使用小写！
常用空元素：

<br>      换行
<hr>      水平分割线
<input>    输入框
<p>       </p>  输入具体内容

元素属性
<

p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

标题

在HTML中，<h1>~<h6>代表不同级数的标题

 <h1>my first web 页面</h1>
  <p>内容欠缺：)</p>
  <h2>文章内容</h2>
  <p>正确</p>>

在这里插入图片描述

6、文本标记

在HTML代码中，通过加入特殊标签，对文章内容处理。

<mark> </mark>     高亮
<u>   </u>     下划线
<strong>   </strong>  字体加粗
<em>   </em>    字体改为斜体

7、超链接

超链接使用方式

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

在这里插入图片描述
超链接解释：href即为要跳转去的地址 URL
target属性为_blank表示在新的页面打开超链接
锚点（书签），用于标记页面的某个元素或位置。通过锚点，我们可以在本长页面内实现跳转。

 <a href="https://www.baidu.com/" target="_blank">百度一下</a>
  <br><br><br>
  <h2 id="C6">第一章</h2>
  <pre>    当我在夜里独赴幽会的时候,鸟儿不叫,风儿不吹,街道两旁的房屋沉默地站立着.

    是我自己的脚镯越走越响使我羞怯.
    
    当我站在凉台上倾听他的足音,树叶不摇,河水静止像熟睡的哨兵膝上的刀剑.
    
    是我自己的心在狂跳＿＿我不知道怎样使它宁静.
    
    当我爱来了,坐在我身旁,当我的身躯震颤,我的眼睫下垂,夜更深了,风吹灯灭,云片在繁星上曳过轻纱.
    
    是我自己胸前的珍宝放出光明.我不知道怎样把它遮起. </pre>
<!-- 文档其余部分 -->
<hr>
<a href="#C6">跳到第一章</a>
<!-- 文档其余部分 -->
...

在这里插入图片描述
注意：

元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号

8、图片添加

<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1137577508,3558242286&fm=26&gp=0.jpg" alt="小新 Logo" width="200" height="300">

在这里插入图片描述

src属性为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符）
可为图片指定高宽度，但不建议（可能导致图片变形）

文件路径：绝对路径和相对路径。
绝对路径：指此文件的完整路径
相对路径：一般是此文件下的路径
一般采用相对路径。

9、表格创建

一般而言，HTML的表格样式比较丑，都在css中创建，所以不做解释。

10、列表

分为无序列表和有序列表
无序列表：

<ul>
  <li>国</li>
  <li>家</li>
  <li>人</li>
</ul>

<ul type="square">

在标签中可以加入类型，改变前面标签模样。

有序列表：

<ol>
  <li>国</li>
  <li>家</li>
  <li>人</li>
</ol>

表单

这个在日常调研中很实用。

<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>

在这里插入图片描述

yuminglc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
始于Web页面的HTML网页

1、HTML简介HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。HTML定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。
复制链接

扫一扫