html零基础速通

qq030928

已于 2023-10-11 10:44:26 修改

阅读量59

点赞数 1

文章标签： html 前端 java

于 2023-09-20 15:20:49 首次发布

本文链接：https://blog.csdn.net/m0_47407301/article/details/133080644

版权

一、文件结构

1. 声明网站版本类型

<!DOCTYPE html>

2.<head>头部（不显示在网站中）

<html>
    <head>
       文件的字符编码、关键字和程序脚本及网站名称
    <head>
</html>

3. <body>网站主体

<html>
    <head>
       文件的字符编码、关键字和程序脚本及网站名称
    <head>
    <body>
      图片、文字等
    </body>
</html>

4. 输入!+Tab键，即可得到整体结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">个人中心</a></li>
    </ul>
    <h1>你好</h1>
    <p><strong>我的名字是</strong></p>
    <p><em> Nobody </em></p>
    <p><a href="#">了解更多</a></p>
</body>
</html>

其中，lang代表网站主要使用的语言，可替换成：

zh-Hant ：中文（繁體）

zh-Hans：中文（簡體）

zh-CN：中國大陸

zh-HK：香港

zh-MO：澳門

ctrl+s保存文件后，打开文件就能刷新了

二、主要标签类型

区块元素（一行空间）和行内元素（有多少内容就占多少空间）

1. 标题设置

<h1>这是大标题<h1>
<h2>二级标题<h2>
以此类推

2. 正文（独立段落，独立区块）

<p>这是正文<p>

3. 粗体和斜体

<p><strong>这是粗体</strong><p>
<p><em>这是斜体</em><p>

4. a标签（建立网络的连接，把这个文字变成可点击跳转的形式）

    <p><a href="#">了解更多</a></p>

href后可以接文件里的地址，也可以接网址

5. 清单

5.1 有序清单

<ol>
    <li>第一</li>
    <li>第二</li>
<ol>

5.2 无序清单

<ul>
    <li>第一</li>
</ul>

6. blackquote标签引用

<blackquote cite = "引用的网址">引用的正文</blackquote>

这里的cite属性不是必须的

7. 换行(br)

在要换行的句子开头前加一个<br>，注意，这里不需要闭合起来。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格

8. 导入图片（也是区块元素）

    <img src = "images/img1.png", alt="这是一张图片">

这里的src后面接图片所在的网址或图片的文件路径，

alt后面接描述这张图片的文字（必须），注意！！

这段文字不会在正常显示图片时出现，而会在图片无法正常显示时显示

9. 用水平线隔开（hr）

<hr>

三、html语义标签

语义标签是为了让搜索引擎更好地理解网站的内容，增进网站的曝光率。

添加了这些标签并不会让页面看起来发生改变，如果想可视化变化，需要在css文件中更改这些标签的background color。

<header> 包含了网站的logo和页首等相关的资讯

<nav>放置网站的导览列或主选单

<main>防止网站的主要内容

这四个标签都是放置在<body></body>里的

还有<section>标签，用于当main部分内容比较多，需要分类时

四、表单和按钮设计

语法：

<section class="news letter">
＜p>歡迎訂閱烘培工坊電子報，可不定期收到限定優惠喔 ！</p>
<form>（表单）
<input type="email" placeholder="請輸入您的 Email" required>
<button type="submit">送出</button>
</form> 
</section>

type = "email"表示输入的类型为邮箱

placeholder="请输入你的Email"，表示在文本框中的文字为“请输入你的Email“

required表示必填

<button>表示按钮

type = "submit"表示提交

<送出>为按钮的文字