Web开发之HTML知识点总结

最新推荐文章于 2023-02-15 17:23:20 发布

nuist__NJUPT

最新推荐文章于 2023-02-15 17:23:20 发布

阅读量425

点赞数

分类专栏： Javaweb整理文章标签：前端 web开发 HTML 超文本标记语言网页开发

本文链接：https://blog.csdn.net/nuist_NJUPT/article/details/126361409

版权

Javaweb整理专栏收录该内容

23 篇文章 3 订阅

订阅专栏

HTML是超文本标记语言，用来写静态网页的语言，是设计页面的基础，由标签组成的语言，能展示超文本效果，即可以展示图片，由样式的文字，带跳转页面的文字等。HTML文件直接由浏览器解析，无需编译，正常由上到下执行，一般的HTML标签是开始标签和结束标签包裹内容体，当然也有空标签。

1-HTML的字体标签和格式化标签

HTML可以设置字体大小和字体颜色，字体类型等，可以设置标题类型，设置空格，换行，设置段落标签等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体标签和和格式化标签</title>
</head>
<body>
<!--分别设置了颜色，大小和字体，换行-->
<font color="red" size="7" face="宋体">早上好！！！</font><br/>
<!--标题标签-->
<h1>静夜思,这是1级标题</h1>
<h2>静夜思,这是2级标题</h2>
<h3>静夜思,这是3级标题</h3>
<h4>静夜思,这是4级标题</h4>
<h5>静夜思,这是5级标题</h5>
<h6>静夜思,这是6级标题</h6>
<!--段落标签p-->
<p>这是默认居左的段落标签</p>
<p align="center"> 这是居中的段落标签</p>
<p align="right"> 这是居右的段落标签</p>
<!--空格段落标签-->
在李和白字间加空格,李&nbsp;白
<!--这是HTML的注释，该注释仅在源码中可以看到，具体的页面不显示-->
</body>
</html>

2-HTML之图片标签

HTML的图片标签可以用于加载本地图片和网页上的图片，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML的图片标签</title>
</head>
<body>
<!--设置三个分别为图片路径,图片宽度和图片的高度-->
<img src="../a.jpg" width="100px" height="100px"/>
<img src="../b.jpg" width="50%" height="50%"/>

<!--加载网站上的图片-->
<img src="https://www.51tietu.net/qingchungirl/190327.html" width="500px" height="500px">
</body>
</html>

3-HTML之列表标签

HTML的列表标签主要包括无序列表和有序列表两种，具体如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML的列表标签</title>
</head>
<body>
<!--li是列表项目标签-->
<!--ul是无序列表-->
<ul>
    <li>无序列表行1</li>
    <li>无序列表行2</li>
    <li>无序列表行3</li>
    <li>无序列表行4</li>
</ul>
<!--ol是有序列表-->
<ol>
    <li>有序列表行1</li>
    <li>有序列表行2</li>
    <li>有序列表行3</li>
    <li>有序列表行4</li>
</ol>

</body>
</html>

4-HTML之超链接标签

HTML的超链接的可以链接到外网的网页地址，也可以是HTML页面，也可以链接到一张图片等，超链接的内容可以是文字或者图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML的超链接标签</title>
</head>
<body>
<!--这是HTML的超链接标签-->
<a href="ziti.html">这是跳转到另一个HTML的链接</a>
<a href="http://www.baidu.com">这是跳转到百度首页的链接</a>

<!--超链接的内容是一张图片-->
<a href="http://www.baidu.com">
    <img src="../a.jpg" width="100px" height="100px">
</a>

<!--链接到一张图片-->
<a href="../a.jpg">链接到一张图片</a>

</body>
</html>

5-HTML之表格标签

HTML的表格标签可以设置表格宽度，线框，设置表头单元格，设置跨行和跨列合并等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML的表格标签</title>
</head>
<!--这是一个表格标签,tr表示行,td表示列,th设置为表头单元格-->
<body>
<!--board设置线框粗细,width设置表格宽度-->
<table border="1px" width="100%">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>外语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>100</td>
        <td>89</td>
        <td>90</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>98</td>
        <td>97</td>
        <!--跨行合并-->
        <td rowspan="2">78</td>
    </tr>
    <tr>
        <!--跨列合并-->
        <td colspan="2">王五</td>
        <td>97</td>

    </tr>
</table>
</body>
</html>

6-HTML之块标签

HTML的快标签主要包含行级快标签span和块级块标签div，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML的块标签</title>
</head>
<body>
<span>这是行级快标签,有多少内容就会占用多少空间</span>
<span>这个标签不会自动换行,适用于少量数据的展示</span>
<div>这是块级的块标签,默认占满一行</div>
<div>该标签会自动换行,适用于大量数据的展示</div>
</body>
</html>

7-HTML之表单标签

HTML的表单标签为form标签，主要包括文本框，密码框，单选框，复选框，文件框，多选列表，文本域，提交按钮，重置按钮等。form表单中,action表示提交到的位置,method表示提交的方法,get和post两种，get方法会将参数拼接到地址栏，适合少量数据的提交，post方式的提交参数不会拼接地址栏,适合当量的数据提交,相对比较安全。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML的表单标签</title>
</head>
<body>
<!--form表单中,action表示提交到的位置,method表示提交的方法,get和post两种-->
<!--get方法会将参数拼接到地址栏，适合少量数据的提交-->
<!--post方式的提交不会拼接地址栏,适合当量的数据提交,相对比较安全-->
<form action="biaoge.html" method="get">
    uid:<input type="hidden" name="uid" value="wang"/><br/>
    用户名:<input type="text" name="username" /><br/>
    密码:<input type="password" name="password"/><br/>
    性别:<input type="radio" name="sex" value="man" checked="checked">男
    <input type="radio" name="sex" value="woman">女<br/>
    爱好:<input type="checkbox" name="hobby" value="programming" checked="checked"/>编程
    <input type="checkbox" name="hobby" value="run"/>跑步
    <input type="checkbox" name="hobby" value="read"/>阅读<br/>
    只读:<input type="text" name="name1" value="****" readonly="readonly"/><br/>
    不可用:<input type="text" name="name2" value="*****" disabled="disabled"/><br/>
    照片:<input type="file" name="file"/><br/><br/><br/>
    城市:<select name="city" multiple="multiple">
        <option value="beijing" selected="selected">北京</option>
        <option value="shanghai">上海</option>
        <option value="nanjing">南京</option>
        <option value="hangzhou">杭州</option>
    </select><br/><br/>
    个人简介:<textarea name="short"></textarea><br/><br/><br/>
    <input type="submit" value="提交">
    <input type="reset" value="重置表单">
    <input type="button" value="普通按钮">
</form>
</body>
</html>