2023-07-26

wujunstudyjava / 2023-07-27 / 原文

软件开发

网页开发

静态网页开发

HTML

HTML 超文本标记语言

浏览器

在浏览器中输入域名https://www.baidu.com/

打开了一个网页，看到了网页内容

查看网页源代码，发现里面有很多代码

浏览器的角色是翻译，将代码翻译成我们看到的内容

一、编写一个网页文件

1、在桌面新建一个文本文档

桌面就有一个文件，文件名为：新建文本文档.txt

2、将文件名修改成网页格式的

也就是将后缀改成.htm或者.html

3、通过记事本打开这个文件

4、编写hello world，运行页面

hello world的内容直接展示了

5、给浏览器下指令

语法要求指令要用<>包起来

font 标记（标签）告诉浏览器我要下指令了

color属性

双引号中的内容是color属性的值

效果：给font标签对之间的内容添加颜色为红色。

<font color="red">hello world</font>

二、IDE集成开发环境

webstorm

hbuilder

Dreamweaver

vscode

0、给vscode添加插件

\1. chinese 汉化 \2. Auto Rename Tag 自动将结尾标签更改 \3. HTML CSS Support 在HTML文档中支持CSS的提示 \4. HTML snippets 自动生成html代码，专门对html代码格式化比如输入HTML5能够生成一个HTML5文件的标准模板代码。 \5. Image preview 在代码中预览引入的图片的缩略图 \6. IntelliSense for CSS class names in HTML 可以在HTML代码中智能提示CSS代码中的class name \7. Live Server 可以将vscode作为一个服务器，让浏览器来访问（可以开启一个服务器，执行我们所写的前端文件，并且实时更新，也就是说，以后可以无需刷新页面就可以查看效果了） \8. open in browser 可以指定浏览器打开网页 \9. stylelint编写CSS代码时，语法错误智能提示

1、vscode的使用

a、添加文件夹到工作区

b、在目录下创建文件

c、编写代码并运行

<font color="red">hello world</font>

三、网页基本结构

<html>
    <head>
        描述页面的信息
        例如：
        字符集
        标题
    </head>
    
    <body></body>
</html>

通过vscode开发工具可以快捷生成代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    
</body>
</html>

注释

<!--
        注释
        网页的使用者  用户  看最终的结果
        浏览器         看代码
        程序员      看最终的结果、  看代码、看注释 
    -->

四、常用的HTML标签（标记）

学习标签时，标签名、属性

1、文字处理

a、正文标题

h1-h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

b、段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>阿斯顿发起ower群文件as发送到发送到发微身份地位阿的说法是阿斯顿发起ower群文件as发送到发送到发微
    身份地位阿的说法是阿斯顿发起ower群文件as发送到发送到发微身份地位阿的说法是阿斯顿发起ower群文件
    as发送到发送到发微身份地位阿的说法是阿斯顿发起ower群文件as发送到发送到发微身份地位阿的说法</p>
    <p>是阿斯顿发起ower群文件as发送到发送到发微身份地位阿的说法是阿斯顿发起ower群文件as发送到发送到发微
    身份地位阿的说法是阿斯顿发起ower群文件as发送到发送到发微身份地位阿的说法是阿斯顿发起ower群文件
    as发送到发送到发微身份地位阿的说法是阿斯顿发起ower群文件as发送到发送到发微身份地位阿的说法是</p>
</body>
</html>

问题：中文习惯在每段第一行缩进两个字的距离

用空格进行缩进

直接在第一个字的前面点击空格

结果是无效

意味着在代码中不能直接使用空格

特殊符号来描述空格

&nbsp;

不同的字符集汉字对应的空格个数是不一样的。

c、换行

前面学习的标签都是有范围的，结束标签声明了标签效果的范围。

换行是没有范围，所以是单标签

<br>  <br />

d、水平线段

<hr>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>咏鹅</h3>
    <!--
        hr 水平线段  默认水平居中
            width 声明水平线段的宽度 像素值
            align  水平对齐方式 left、right、center
            color 线段颜色
            size 粗细
    -->
    <hr width="100" align="left" color="red" size="50">
    鹅鹅鹅，<br>
    曲项向天歌。<br>
    白毛浮绿水，<br>
    红掌拨清波。<br>
</body>
</html>

e、其他文字标签

粗体 b strong

斜体 i em

下划线 u

预格式 pre 先在代码中排版，就按照排版的格式显示

字体标签 font color size face

color属性可以使用单词，标准方式是用三原色的十六进制数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>粗体</b>
    <i>斜体</i>
    <u>下划线</u>
    <!--
        标签嵌套
        先开始的后结束，后开始的先结束
    -->
    <b><i><u>组合</u></i></b>

    <strong>粗体</strong>
    <em>斜体</em>

<pre>
一行白鹭上青天，
    一行白鹭上青天，
        一行白鹭上青天，
            一行白鹭上青天，
        </pre>
<!--
    三原色
    十六进制
    每两位数字是一种颜色
    红占两位        12      18
    绿占两位        34      52
    蓝占两位        56      86
-->
<font color="#123456" size="7" face="宋体">你好</font>
</body>
</html>