当前位置：首页 > news >正文

HTML简介

news 文章来源：https://blog.csdn.net/WuMingf_/article/details/143868011 2024/11/27 8:42:21

知识点一 HTML

什么是HTML？

超文本标记语言(HyperTextMarkup Language，简称HTML)

怎么学HTML？

HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签

开发工具

编辑器: Pycharm 浏览器:Chrome、Firefox

HTML的基本结构

HTML的基本模块

<!DOCTYPE html>               <!--文档类型-->
<html lang="en">              <!--根标签>
<head>                        <!--网页头部--><meta charset="UTF-8">    <!--国际编码--><title>Title</title>      <!--网页标题-->
</head>                       
<body><!--网页主体>
</body>
</html><!--静态页面  动态页面-->
静态页面是随着HTML代码的生成，页面的内容和显示效果就基本不会发生变化
（除非修改页面代码），而动态页面，虽然同样页面代码不发生变化，但是其显
示的内容确实可以随着时间环境或者数据操作的结果而发生变化。因此静态页面和动态页面的认识应该定位在：是否有数据库加工这个环节。例如
去购买T-shirt，我们直接从商店购买的T-shirt就是静态页面，而我们根据不同
人兴趣定制T-shirt就是动态页面。

知识点二标签

什么是标签：？

由尖括号包裹单词构成，eg:<html>,所以标签不可能以数字开头
标签不区分大小写，推荐小写
标签可以嵌套，但不能交叉嵌套
错误示例:<a><b></a></b>正确示例:<a><b></b></a>

标签使用样式:

1.开始标签<a >标签体</a>结束标签
2.自闭合标签，eg:<br>,<hr>,<input><img>

标签属性:

a.通常为键值对形式出现，eg:color=“red”  id='eat'
b.属性只能出现在开始标签和自闭和标签内
C.属性名字全部小写，属性值必须用单引或者双引包裹
d.如属性名和属性值完全一样，直接写属性名即可，eg:“readonly”(input标签属性)

标题标签及基础标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jianqi</title>
</head>
<body><a href="#add">跳转到add</a><p id="test"></p><h1>1级标签</h1><h2>2级标签</h2><h3>3级标签</h3><h4>4级标签</h4><h5>5级标签</h5><h6>6级标签</h6><p>无人扶我青云志，我自踏雪至山巅。</p><p>无人扶我青云志，我自踏雪至山巅。</p><div>这是一个div标签</div><div>这是第二个一个div标签</div><div>一个最原始、最干净的容器 和其他容器标签用途一样，但其他标签都特定了装什么东四</div>
<!--target="_blank" 重新打开一个网页，默认是_self--><a href="http://www.baidu.com" target="_blank"><img src="1.png"></a><a href="#test">返回顶部</a><a name="add"></a><div>
<!--内连标签站占一行，只需要把内连标签套在外连标签中--><a href="javascript:void(0)">点进去有惊喜</a></div>
</body>
</html><!--静态页面  动态页面-->

有序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ol type="a" start="3"><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li></ol>
</body>
</html>

无序列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul type="circle">
<!--默认desc空心圆circle正方形的实心square取消none--><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li><li>hello world</li></ul>
</body>
</html>

标签缩进

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--
&emsp;字符宽
&nbsp;空格宽
&lt;  <
&gt;  >
--><i><strong><p>&emsp;&emsp;无人扶我青云志，我自踏雪至<a href="https://baike.baidu.com/item/%E5%B1%B1%E5%B7%85/5588984" target="_blank">山巅,&lt;听泉&gt;</a></p></strong></i><i>斜体</i><strong>粗体</strong>
</body>
</html>-----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><dl><dt>江苏省</dt><dd>南京市</dd><dd>苏州市</dd><dt>贵州省</dt><dd>遵义市</dd><dd>贵阳市</dd></dl>
</body>
</html>

快捷键使用:ul>li*n;

ol>li*n;

dI>dt+dd*n;

知识点三特殊符号

参考HTML特殊字符符号大全-CSDN博客https://blog.csdn.net/qq_45301392/article/details/128848810?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522c0c1135442e7c4afc61b97bd855fc559%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=c0c1135442e7c4afc61b97bd855fc559&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-128848810-null-null.142%5Ev100%5Econtrol&utm_term=html%E4%B8%AD%E7%9A%84%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6&spm=1018.2226.3001.4187

知识点四表格

什么是表格？

表格其实就是大家平时看到的二维表，比如Excel表格之类

表格如今的地位

表格布局火于90年代，如今一般用于后台展示数据

表格初识

表格分为表头，表身和表脚

表格整体的结构

    *table  表格标签*thead  表头标签*tbody  表身标签*tfoot  表脚标签

表格的其他补充
caption 表格标题
rowspan 合并行
colspan  合并列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table{border-collapse: collapse;  /* 边框合并 */text-align: center;  /* 居中 */width: 300px;}</style>
</head>
<body><table border="2"><thead><tr><th>序号</th><th>班级</th><th>姓名</th><th>性别</th></tr></thead><tbody><tr><td colspan="2">10</td>  <!-- 合并行 --><td>python</td><td>捡起</td><td>牛</td></tr><tr><td>11</td><td rowspan="2">java</td>  <!-- 合并列 --><td>fufu</td><td>虎</td></tr><tr><td>12</td><td>math</td><td>beibei</td><td>兔</td></tr></tbody></table>
</body>
</html>

知识点五表单

表单是什么

表单是搜集用户数据信息的各种表单元素的集合区域

表单的作用

用于收取用户数据并向后台发送，前后交互的方式之一

表单的应用

表单常应用于 登录注册，搜索，文件上传等

表单的属性

form表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--    <form action="http://www.baidu.com/s" method="get">-->
<!--        <input type="text" name="wd" placeholder="请输入你要搜索的内容">-->
<!--        <input type="submit" value="提交">--><form action="https://www.sogou.com/web" method="get"><input type="text" name="query" placeholder="请输入你要搜索的内容"><!-- name用作服务区作为数据交互 --><input type="submit" value="提交">
<!--
type 属性规定 input 元素的类型
name    作为可与服务器交互数据的HTML元素的服务器端的标示。
button  定义可点击按钮(多数情况下，用于通过 JavaScript 启动脚本)。
checkbox    定义复选框。
hidden  定义隐藏的输入字段。
file    定义输入字段和"浏览"按钮，供文件上传。
image   定义图像形式的提交按钮。
password    定义密码字段。该字段中的字符被掩码。
radio   定义单选按钮。
reset   定义重置按钮。重置按钮会清除表单中的所有数据。
submit  定义提交按钮。提交按钮会把表单数据发送到服务器。
text    定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符
--></form>
</body>
</html>

form表单完整版

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="" method="get"><p>用户名：<input type="text" name="uer" placeholder="请输入用户名"></p><p>密&emsp;码<input type="password" name="paw" placeholder="请输入密码"></p><p>性&emsp;别<input type="radio" name="sex" value="female">女<input type="radio" name="sex" value="male">男</p><p>爱&emsp;好<input type="checkbox" name="hobby" value="sing">唱歌<input type="checkbox" name="hobby" value="dance">跳舞<input type="checkbox" name="hobby" value="swim">游泳</p><p>上传文件：<input type="file" name="file"></p><p><textarea name="xing" cols="30" rows="10" placeholder="写上你未来的计划"></textarea></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p></form>
</body>
</html>

form领域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form><fieldset><legend>Personalia</legend>Name:<input type="text"><br>Email:<input type="text"><br>Date of birth:<input type="text"></fieldset></form>
</body>
</html>

form下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form><p>地址<select name="addr"><optgroup label="江苏省"><option value="NJ">南京市</option><option value="SZ">苏州市</option></optgroup><optgroup label="贵州省"><option value="ZY">遵义市</option><option value="GY">贵阳市</option></optgroup></select></p></form>
</body>
</html>