HTML基础之小白入门

最新推荐文章于 2024-08-20 10:31:33 发布

AutumnorLiuu

最新推荐文章于 2024-08-20 10:31:33 发布

阅读量1.6k

点赞数 30

文章标签： html

本文链接：https://blog.csdn.net/AutumnorLiu/article/details/106774947

版权

HTML基础

文章目录

1.HTML介绍

HTML全称HyperText MarupLanguage  超文本标记语言
超文本：比起一般文本，还能显示更加高级的内容，比如图片、音频、视频
标记语言：使用标签对内容进行维护
	XML： 自己定义的标签
	HTML： 使用指定的标签（浏览器能够识别的），在页面上显示超文本

CSS: Cascading Style Sheet 层叠样式表，作用为美化界面
web标准有三个部分：
1）结构层：用来搭建页面结构（HTML） 标签
2）表现层：用来装饰页面(CSS)  属性
3) 行为层：用来和用户交互（JavaScript/JS）逻辑

2. HTML文档结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

代码说明：
<!DOCTYPE html>： 文档类型声明，不同类型的文档类型声明，允许使用的标签不一样
<html>：最外层的标签，称为根标签，一个HTML文件，只能有一个
<head>： 头标签，用来对文档内容进行描述
<body>： HTML文档的主体，用来放在页面上显示网页内容，在此标签下，会写大量的标签来构建网页的结构

3.HTML基本标签介绍

3.1 h标签

<!-- -->: 注释标签,浏览器中不解析其中内容
h 系列标签：用来显示各级标题，有h1 - h6 级，h1最好不要滥用，只有一个最好，有利于搜索引擎优化

<h1>hello world</h1>
<!-- 大家好，我是注释标签，浏览器不会解析我！ -->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>

在这里插入图片描述

浏览器默认的字体为h4

3.2 p标签

<p>标签：
一个p标签就是一个段落（paragraph）

<p>大家好，我是一个p标签</p>
<p>大家好   我是</p>
<p>彭于晏</p>

运行效果如下：
在这里插入图片描述

<hr> 标签：
用来产生一条分割线，是一条单标签

<p>我是一个P</p>
<hr>
<p>我也是一个P</p> <hr>

运行结果如下：
在这里插入图片描述

<br> 标签：（batter rabbet）
用来给文字换行

<p>大家好，我是<br>吴彦祖</p>

3.3 div和span

标签div和span
div 和 span 都是没有语义的标签，用来设置样式
div : 默认宽度是整个屏幕，高度由内容来填充
span : 宽高都是由内容来填充

<!-- 设置一个绿色方块 -->
<div style="height:100px;background-color:green;"></div>
<!-- 产生一个粉色字体  -->
<p>大家好，我是<span style="color:hotpink;">粉色</span></p>

运行效果如下：
在这里插入图片描述

一般的，标签都是成对出现，例如h1标签， <h1> 表示的是标签的开始，</h1>表示标签的结束，在开始标签和结束标签中间，编写标签里显示的内容。但是对于单标签，例如<hr>标签、<br>标签、<img>标签等，这类标签里不需要显示文字内容，只需要使用一个单标签就能完成，它们的书写方式是 <标签名 />

3.4 特殊字符

有些字符再HTML中无法正常显示，需要用特殊字符代替
例如：多个空格会被解析成一个空格，要表示多个空格，要用&nbsp
常见特殊字符可百度到

3.5.超链接和图片标签

超链接就是a标签（anchor）
href 就是链接地址
如果要链接到一个外部地址，必须把url路径写完整
格式： 协议头 + 主机名 + 域名 + 端口
https:// www.baidu.com  :443
http: // www. baidu.com  :80
a 标签指向的，可以是任意类型的文件，内部文件使用相对路径即可
浏览器不能识别的东西，会下载，能识别就直接打开
a 标签具有锚点定位的作用

<a href="http://www.youku.com">优酷</a>
<a href="#mubiao">跳转到目标位置</a>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<p>我是p</p>
<div id="mubiao">我是div</div>
<p>我是p</p>
<p>我是p</p>

运行结果如下图

在这里插入图片描述

上图值截取了一部分，点击优酷，可跳转至优酷界面，点击‘跳转到’目标位置，可找到“我是div”

a标签常见属性：

属性名	取值	含义
href	url地址	让a标签指向特定地址
target	_self _blank	_blank让浏览器在新页面打开，_self在当前页面打开，默认值为self

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

图片标签

<img src="test.png" alt="当图片加载失败时会显示这段文字"/>

src 属性用来指定图片的路径，可以使用绝对路径和相对路径，一般情况下我们会选择使用相对路径

常见属性

属性名	取值
src	url	img标签加载的图片URL地址
alt	文字	当图片加载失败时显示的文字
title	文字	全局属性，当鼠标悬停到图片上时显示的文字
width	数字,单位为px(像素)	用来指定图片的宽度
height	数字，单位为px(像素)	用来指定图片的高度

3.6.列表标签

列表常分为三种：

有序列表ol
无序列表ul
定义列表dl

3.6.1有序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color:red;
        }
    </style>
</head>
<body>
<ol>
    <li>起床</li>
    <li>洗漱</li>
    <li>吃饭</li>
    <li>出门</li>
    <li>上班</li>
</ol>
</body>
</html>

里面的每一个列表项用li标签，运行结果如下：
在这里插入图片描述

ol标签属性

type : 用来指定序号类型，可选值有a,A,I,i,1
start: 指定开始序号

3.6.2无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>菊花</li>
    <li>兰花</li>
    <li>桂花</li>
    <li>荷花</li>
</ul>
</body>
</html>

和有序列表一样，无序列表里的列表项同样使用 li 标签来表示:
在这里插入图片描述

ul属性

circle :显示空心圆
disc: 显示实心圆
square ：显示实心方块

3.6.3 定义列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
    <dt>张三</dt>
    <dd>张三没我帅</dd>
    <dt>李四</dt>
    <dd>李四没我幽默</dd>
    <dt>王五</dt>
    <dd>王五比我有钱</dd>
</dl>
</body>
</html>

定义列表里的每一个列表项使用dt表示，同时，每一个dt列表项一般都会再跟一个 dd 标签对dt进行说明：
在这里插入图片描述

4.表格的使用

在HTML里，使用<table>来显示一个表格，table 有几个常见子标签：
 	<caption>: 显示标题，一般配合<h>使用
 	<tr>：表示一行数据
 	<th>：放在tr标签下，表示表头
 	<td>：放在tr标签下，表示单元格
 		td标签可设置rolspan、colspan属性，表示其占多少单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
       table {
            /* 让表格合并边框 */
            border-collapse:collapse;
        }
        td,th {
            /*设置边框的线宽为1px,实线,黑色*/
            border:1px solid #000;
            text-align:center;
            padding:10px;
        }
    </style>
</head>
<body>
<table>  <!-- 画表格-->
    <caption>成员信息</caption>
    <tr>
<!--  th为表头，字体会加粗     -->
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>电话</th>
    </tr>
    <tr>        <!--一个tr 就是一行-->
        <td>张三</td>   <!-- 一个TD就是一个数据 -->
        <td>male</td>
        <td>21</td>
        <td>198888203</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>male</td>
        <td>20</td>
        <td>197788203</td>
    </tr>


</table>

</body>
</html>

运行结果如下：
在这里插入图片描述

5.表单提交数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
<!--  主要作用：给服务器提交数据  -->
</head>
<body>
<!--
form: 表单
action：指定提交地址
-->
  
<form action="https://www.baidu.com">

  <!--input用来接收用户的输入
  type 用来规定输入数据类型。常用可选值如下：
    text: 默认值，显示一个文本输入框
    password: 输入为不可见
    number：允许用户输入数字，包括e和 .
    tel : 只在移动端有效
    button : 显示一个按钮，value 属性：用来设置按钮上的文字
    placeholder : 用来显示提示信息
    radio : 显示一个单选框,如果设置只选择一个，则需要设置同样的name 属性
    label : 用其for 属性和另一个的id进行关联
    checkbox : 显示一个多选框
    reset : 重置当前form表单中的数据
    file : 选择文件
    submit : 给指定的网址（form 中的 action）提交数据
    method ： 指定以那种方式提交数据
        get : 所有的请求的数据直接拼接到地址栏，默认值
        post : 单独发送请求的数据
        向服务器提交数据时需加name 属性
    -->

    <span>用户名</span> <input type="text" name="username"> <br>
    <span>性别</span> <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <input type="radio" name="sex"> <span>女</span> <br>
    <span>爱好：</span>
    <input type="checkbox" id="tubu"> <label for="tubu">徒步</label>
    <input type="checkbox" id="paobu"> <label for="paobu">跑步</label>
    <input type="checkbox" id="pashan"> <label for="pashan">爬山</label>
        <br>
    <span>密码</span> <input type="password" placeholder="请输入密码"> <br>
    <span>手机号</span> <input type="tel">
    <input type="button" value="点击发送验证码"><br>

    <input type="reset" value="重置">
    <input type="submit" value="注册">
</form>
</body>
</html>

运行结果如下：

在这里插入图片描述
综合使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="https://www.baidu.com">
    <span>我是</span>
    <input type="radio" name="gender" id="nan" value="male"> <label for="nan">男</label>
    <input type="radio" name="gender" id="nv" value="female" checked> <label for="nv">女</label> <br>

    <span>省份</span>
    <select name="province" id="">
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>
        <option value="zhejiang">浙江</option>
        <option value="jiangsu" selected="selected">江苏</option>
        <option value="anhui">安徽</option>
    </select><br>

    <span>兴趣爱好</span>
    <!--  type="checkbox" 表示的是一个复选框  -->
    <input type="checkbox" name="hobbies" value="basketball" id="basketball"> <label for="basketball">篮球</label>
    <input type="checkbox" name="hobbies" value="football" id="football"> <label for="football">足球</label>
    <input type="checkbox" name="hobbies" value="volleyball" id="volleyball" checked> <label for="volleyball">排球</label>
    <input type="checkbox" name="hobbies" value="pingpong" id="pingpong" checked> <label for="pingpong">乒乓球</label>
    <br>
    <span>年龄:</span>
    <input type="number" name="age" max="80" min="18" value="20"><br>
    <span>手机号:</span>
    <input type="tel" name="phone" autofocus autocomplete="off"><br>
    <span>密码</span>
    <input type="password" name="pwd" placeholder="请输入密码"><br>
    <span>姓名:</span>
    <input type="text" name="username" required><br>

    <span>自动分配的id</span>
    <input type="text" value="user01" name="user_id" readonly><br>

    <input type="file"><br>
    <input type="hidden"><br>
    <span>邮箱</span>
    <input type="email"><br>
    <input type="color"><br>
    <span>出生日期</span>
    <input type="date"><br>
    <input type="search" placeholder="请输入你要搜索的内容"><br>
    <!--  reset用来重置form表单里的内容  -->
    <input type="reset" value="重置" disabled><br>
    <input type="submit" value="点击注册">
</form>
</body>
</html>