[Web] HTML与CSS——HTML简介

Varitall

已于 2023-09-24 17:59:14 修改

阅读量46

点赞数

分类专栏： Web 文章标签： html css 前端

于 2023-07-26 21:52:07 首次发布

本文链接：https://blog.csdn.net/joyride_run/article/details/131934277

版权

Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、font标签（HTML5不支持，请使用CSS代替）

一、HTML简介

HTML：Hyper Text Markup Language（超文本标记语言）。

通过标签来告诉浏览器如何显示其中的内容。

二、HTML创建

1、HTML工程建立

（1）创建新项目

（2）在【Add Framework】中添加【Web Application】

（3）添加HTML文件，完成

2、HTML基础书写模板

<!-- 这个是注释 -->
<!DOCTYPE html> <!-- HTML5的声明 -->
<html lang="zh_CN"> <!-- html标签，表示html的开始；lang属性表示支持的语言 -->

<!-- html标签中一般有head和body两部分 -->
<head> <!-- 头部标签，一般包含title、css样式、js代码 -->
    <meta charset="UTF-8"> <!-- 表示用utf-8字符集 -->
    <title>Title</title> <!-- 页面标签标题 -->
</head>

<body>
页面主体内容，其中的换行和空格会被忽略。
只能通过标签或CSS改变样式
</body>

</html>

三、HTML标签介绍

1、标签的格式

<标签名> 文本内容 </标签名>

2、标签名大小写不敏感

3、标签有自己的属性

（1）基本属性，如：bgcolor="red"：背景颜色；

（2）事件属性，如：οnclick="alert('你好！')"：点击事件；

4、标签分为，单标签和双标签

（1）单标签，如：<br/>：换行；<img src = ".../.../xx.ipg" />；

（2）双标签，如：<link> 文本 </link>：链接资源

5、标签规则

（1）不能交叉嵌套；

（2）属性值必须用双引号；

（3）无论单双标签，必须有 / 结尾；

四、常用标签

1、font标签（HTML5不支持，请使用CSS代替）

2、特殊字符

（1）需要在页面上输出：我是<br/>标签。

应该这么写：

<body>

我是&lt;br/&gt;标签

</body>

（2）常用字符实体

3、标题标签

（1）标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。

1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。

（2）<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。

（3）align属性（HTML5中已废弃，用 style 来替代）

left左对齐；center居中；right右对齐

<h1 align="center"> 标题一 </h1>

<h1 style = "text-align:center;"> 标题一 </h1>

4、超链接标签

在网页中，所有点击之后可以跳转的内容都是超链接。

<a href="https://www.baidu.com"> 这是百度链接 </a>

（1）target属性

_self：在本标签页跳转；

_blank：在新标签页跳转；

5、无序列表

大部分情况下都是用无序列表，无序列表用 <ul><li>内容</li></ul>表示。

<ul>
    <li>
        <p>
            百度链接：<a href="https://www.baidu.com">click</a>
        </p>
    </li>
    <li>
        <p>
            b站链接：<a href="https://www.bilibili.com">click</a>
        </p>
    </li>
</ul>

6、img标签

img标签可以在html页面上显示图片。

（1）src属性：设置图片路径。

在web中，相对路径和绝对路径与脚本编辑略有不同：

①相对路径：

.        表示当前文件所在目录
..       表示当前文件的上一级目录
文件名    相当于：./文件名

②绝对路径：

http://ip:port/工程名/本地src路径

（2）举例

一般src文件夹与项目文件在同一目录下，则可以这么写：

<img src="./src/R-C.jpg" width = "256" height="144" border="1" alt="not found"/>

width：表示宽度
height：表示高度
border：图片边缘像素点数量
alt：图片路径错误或图片不存在时，用该文本代替

7、表格标签

table：表格标签
    -- width
    -- height
    -- border：实现边框

tr：行标签
td：单元格标签
    -- align
th：表头标签，是特殊的td标签

b：加粗标签

（1）一个带表头，三行三列，并显示边框的表格：

<table width="300" height="300" border = "1">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <td style="text-align: center;"><b>1.3</b></td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

（2）修改表格相对页面的对齐方式、单元格间距：

<table width="300" height="300" border = "1" cellspacing="10" align="center">

8、一个单元格的多行多列占用

主要使用 colspan 和 rowspan 来设置单元格占用的行数和列数。

<table width="300" height="300" border = "1">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

9、iframe标签

在一个HTML页面上，打开一个小窗口，去加载一个单独的页面。

<body>

this is a page:<br/>
<iframe src="https://www.bilibili.com/" width = "1000" height="800"/>

</body>

src可以是自己写的html文件，也可以是网址

（1）通过点击链接，改变iframe内的网页

<body>

this is a page:<br/>
<iframe src="https://www.bilibili.com/" width = "1000" height="800" name="iframe"> </iframe>

<ul>
    <li>
        <a href="https://www.bilibili.com/" target="iframe">bilibili</a>
    </li>
    <li>
        <a href="https://www.taobao.com/" target="iframe">taobao</a>
    </li>
    <li>
        <a href="https://ac.nowcoder.com/" target="iframe">nowcoder</a>
    </li>
</ul>

</body>

10、表单标签

表单就是html页面中，用来收集用户信息的所有元素的集合，然后把这些信息发送给服务器。

（1）表单显示

<body>


<form>
    用户名称：
    <input type="text" value="admin"/><br/>
    用户密码：
    <input type="password"/><br/>
    确认密码：
    <input type="password"/><br/>
    性别：
    <input type="radio" name="sex" checked="checked"/>Male <input type="radio" name="sex"/>Female<br/>
    兴趣爱好：
    <input type="checkbox" checked="checked"/>Java
    <input type="checkbox"/>C/C++
    <input type="checkbox"/>Python <br/>
    国籍：
    <select>
        <option>--select yout country--</option>
        <option selected="selected">China</option>
        <option>Japan</option>
        <option>Mexco</option>
    </select> <br/>
    自我评价：
    <textarea rows="10" cols="20">自我评价</textarea> <br/>

    <input type="reset" value="reset"/>
    <input type="submit" value="submit"/>
    <input type="button" value="button"/> <br/>
    <input type="file" value="选择文件"/>

</form>

</body>

<!--
    input type="text"：单行文本输入框；value属性设置文本框默认值
    input type="password"：密码输入框；
    input type="radio"：单选框； name="sex"将两个单选框设置为同一个组；checked="checked"表示默认选择
    input type="checkbox"：复选框；
    
    select 标签是下拉列表框
    option 标签是下拉列表框中的选项；selected="selected"表示默认选中
    
    textarea表示多行文本输入（起始标签和结束标签中的值是默认值）
        -- rows设置可以显示几行的高度
        -- cols设置可以显示几列的宽度
    
    input type="reset"：重置按钮；value属性修改按钮文本
    input type="submit"：提交按钮；
    input type="button"：按钮；
    input type="file"：文件上传域
    input type="hidden"：隐藏域，当某些信息不需要用户参与，就可以使用隐藏域，提交的时候同时发给服务器
-->

（2）表单格式化

上面的html页面的表单，看起来不是很好看，一般可以通过将表单放入表格内美化表单。

<body>

<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td>
                <input type="text" value="admin"/>
            </td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td>
                <input type="password"/>
            </td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password"/>
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked"/>Male
                <input type="radio" name="sex"/>Female
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked"/>Java
                <input type="checkbox"/>C/C++
                <input type="checkbox"/>Python
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option>--select yout country--</option>
                    <option selected="selected">China</option>
                    <option>Japan</option>
                    <option>Mexco</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea rows="10" cols="20">自我评价</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="reset"/>
            </td>
            <td>
                <input type="submit" value="submit"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="button"/>
            </td>
            <td>
                <input type="file" value="选择文件"/>
            </td>
        </tr>
    </table>
</form>

</body>

（3）表单提交

form标签就是表单标签
    -- action属性设置提交的服务器地址
    -- method属性设置提交的方式（GET、POST）

为了方便测试，可以将表单提交给本机：

<form action="http://localhost:8080" method="get">
    <input type="hidden" name="action" value="login"/>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td>
                <input type="text" value="admin"/>
            </td>
        </tr>
        <tr>
            <td>用户密码：</td>
            <td>
                <input type="password"/>
            </td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td>
                <input type="password"/>
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked"/>Male
                <input type="radio" name="sex"/>Female
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" checked="checked"/>Java
                <input type="checkbox"/>C/C++
                <input type="checkbox"/>Python
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td>
                <select>
                    <option>--select yout country--</option>
                    <option selected="selected">China</option>
                    <option>Japan</option>
                    <option>Mexco</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td>
                <textarea rows="10" cols="20">自我评价</textarea>
            </td>
        </tr>
        <tr>
            <td>
                <input type="reset" value="reset"/>
            </td>
            <td>
                <input type="submit" value="submit"/>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="button"/>
            </td>
            <td>
                <input type="file" value="选择文件"/>
            </td>
        </tr>
    </table>
</form>

</body>

我们观察提交后得到的URL：

http://localhost:8080/        服务器地址
?        分隔符
action=login&sex=on        请求参数（表单信息）

为什么我们表单上那么多信息，却只有action和sex发送过去了呢？

表单提交时，数据没有发送给服务器的三种情况：
1、表单项没有name属性（比如用户名要加上 name="username"、兴趣爱好要加上 name="hobby"）；
2、单选、复选以及下拉列表中的option标签，都需要添加value属性，否则意义不明；
3、表单项不在提交的form标签当中；


GET请求的特点：
1、浏览器地址栏中的地址是：action属性的值[+?+请求参数]
    -- 请求参数的格式：name的值=value的值 & name的值=value的值
2、不安全（密码明文）
3、它有地址长度的限制，一般是100个字符

POST请求的特点：
1、浏览器地址栏中只有action属性值
2、比GET请求安全
3、理论上没有长度限制

将sex的单选框中加上value，即可显示出所选内容：