Html基础入门个人学习笔记(一)

最新推荐文章于 2024-04-19 22:31:37 发布

缘灬小太阳

最新推荐文章于 2024-04-19 22:31:37 发布

阅读量265

点赞数

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

本文链接：https://blog.csdn.net/qq_43389754/article/details/107426014

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.HTML简介

hyper text markup language 超文本标记语言
超文本:：表示能够在页面上展示的内容不仅仅包含文本，还包含图片、视频、音频等。
标记：页面上显示内容需要以<标记></标记>格式来展现。
语言：与计算机交互的方式。
HTML标签：页面内容主体。
CSS样式：让页面内容变得美观（形状、颜色、大小等）
JavaScript语言：让页面内容动态变化。

二. HTML的基本结构

html：整个文档
head：头部标签，用来设置当前页面
body：身体标签，页面上展示的内容

<!doctype html><!-- 当前页面是一个HTML5页面 -->
<!-- 文档的开始 -->
<htML>
	<head><!-- 头信息（设置当前页面信息） -->
		<meta charset="utf-8"/><!-- 设置当前页面文字能够显示中文 -->
		<title>我的第一个页面</title><!-- 设置一个标题-->
	</head>


	<body>
		你好，HTML，我来了！！！
	</body>
</html>
<!-- 文档的结束 -->

三. HTML的基本标签

3.1 注释

指在页面上编写的一些说明文字，不会真正的显示在页面上。
作用是方便程序员理解代码的含义。
语法：

3.2 块级标签

块级标签特点是每一个标签都会独占一行。

3.2.1 P标签

段落标签。让标签中的内容自成一段。
语法：<p>文字内容</p>
可以使用align属性来设置对齐方式：left（左对齐，默认值），right（右对齐），center（居中对齐）
换行标签，使文字换行（该标签没有标签中间的内容，所以直接开始就结束，称为自结束标签）<br/>
**注意 **：换行与段落的区别：段落会与前后的文字都隔一行。

<h2 align="center">静夜思</h2>
<p align="center"><!-- 居中对齐 -->
    床前明月光，<br/>
    疑是地上霜。<br/>
    举头望明月，<br/>
    低头思故乡。
</p>

3.2.2 标题标签

在页面上显示标题内容，会自动设置字体大小，加粗加黑。
分为6级，分别是h1-----h6
语法：一级标题：<h1>文字内容</h1>

<h1>我是一级标题</h1><h1>我还是一级标题</h1>
<h2>我是二级标题</h2><h3>我是三级标题</h3>
<h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6>

3.2.3 水平线标签

是指在页面上画一条横线，可以设置长度、位置、颜色、高度。
语法：<hr />
color：颜色，可以使用英文单词来表示颜色。red、green、blue。
还可以使用色值来表示颜色：0-255，颜色分为3个色值：红，绿，蓝，其他颜色通过3个色值叠加调制而成。
显示的时候采用16进制显示：0-ff，#ffffff。

<hr color="red" size="20" width="300px" align="right"/>

3.2.4 div标签

层标签。本身是一个容器。
用来布局使用。独占一行。

<div align="right" style="border: 1px dashed red;">
    苹果<br />
    梨子
</div>

3.2.5 列表

有序列表：内容呈现会自带顺序编号。

<ol type="a">
    <li>Java
        <ul>
            <li>Spring</li>
            <li>Mybatis</li>
        </ul>
    </li>
    <li>HTML</li>
    <li>Python</li>
    <li>PHP</li>
</ol>

无序列表：内容只会在前面出现一个图标。

<ul type="disc">
    <li>Java
        <ul>
            <li>Spring</li>
            <li>Mybatis</li>
        </ul>
    </li>
    <li>HTML</li>
    <li>Python</li>
    <li>PHP</li>
</ul>

在ul在设置style样式如：style="list-style: none;"会自动清除内容前面的图标

标题列表

<dl>
    <dt>手机</dt>
    <dd>华为</dd>
    <dd>小米</dd>
    <dd>oppo</dd>
</dl>

3.3 行级标签

允许多个标签元素放到一行。

3.3.1 br

换行标签。

3.3.2 span

与div标签的效果差不多，区别在于不会独占一行。

床前<span style="color: red;font-size: 20px;">明月</span>光，<br/>
疑是地上霜。<br/>
举头望明月，<br/>
低头思故乡。

3.3.3 img

用来在页面上插入图片。
语法：<img src="" width="" title=""/>
注意宽度和高度只需要设置一个即可，会自动等比缩放，如果都设置，反而会变形。
src属性可以设置本地项目路径的图片还可以在网络寻找资源图片复制图片地址即可
title属性表示当鼠标悬浮时会显示的文字，当图片不显示时代替的文字。

<img src="img/9.jpg" width="100px" title="美女一号"/>
<img height="120px" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2225607675,1382583985&fm=26&gp=0.jpg" />

3.3.4 a

超链接。作用是跳转页面。
语法：<a href="链接地址">链接文字</a>
href的值可以是本地路径，也可以是网络路径。
target值为_blank时，开启新的窗口，其他的值在普通页面上与默认值一致。
不仅可以使用文字来跳转，也可以使用图片来跳转。

<a href="1.html">我是本地链接</a><br />
<a href="https://www.baidu.com">我是网络链接</a><br />
<a href="https://www.baidu.com" target="_blank">我是打开新窗口的网络链接</a><br />
<a href="https://www.baidu.com">
    <img src="img/9.jpg" width="100px" />
</a>

邮箱链接：href=“mailto:邮箱地址”

<a href="mailto:abc@qq.com">联系我们</a>

锚点链接：
当一个页面上内容过多，需要在一个页面上进行跳转（例如：回到顶部，跳转到底部）
语法：

定义锚点。<a name="锚点名称"></a>
跳转链接：<a href="页面路径#锚点名称">链接</a>（如果只是当前页面，页面路径可以不写，直接写#锚点名称即可。）

<a name="top1"></a> <!--定义锚点 -->
<p>sdfsdfd</p>
...省略很多个p标签
<p>sdfsdfd</p>
<a href="#top1">回到顶部</a>

3.3.5 格式标签

i：斜体
b：加粗
u：下划线
sup：上标
sub：下标

示例代码:

<i>面对</i><b>疾风</b><u>吧</u><br/>
x<sup>2</sup>+y<sub>2</sub>+y2

3.3.6 特殊符号

在页面上，有些符号无法直接打出，可以使用特殊符号标记来实现。
空格： 
小于号：<
大于号：>
版权号：©
钱币符号：¥

四、框架

frame标签
框架集：frameset，作用是将页面切割成多个部分，每个部分显示的内容不一样。
现在不推荐使用。常用的是<iframe>标签

home.html

<frameset rows="20%, *">
	<frame src="top.html"/>
	<frameset cols="20%, *">
		<frame src="left.html" />
		<frame src="" name="rightFrame"/>
	</frameset>
</frameset>

left.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="list.html" target="rightFrame">收件箱</a><br />
		<a href="list1.html" target="rightFrame">发件箱</a><br />
		<a href="https://www.baidu.com" target="_top">百度一下</a>
	</body>
</html>

iframe：在页面上嵌入窗口的方式。

5.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<div style="border: 1px solid red;">
				<h1>欢迎使用XX邮箱系统</h1>
			</div>
			<div align="right" style="border: 1px solid goldenrod;">
				<a href="list.html" target="myFrame">窗口1</a>
				<a href="list1.html" target="myFrame">窗口2</a>
			</div>
			<div style="border: 1px solid blue; height: 500px;">
				<iframe src="" name="myFrame" style="width: 100%;height: 500px;"></iframe>
			</div>
		</div>
	</body>
</html>

注意：如果需要点击链接时，别的窗口跳转，需要给别的窗口的frame定义一个name，然后在跳转链接中，使用target="窗口名称"的方法来进行。
当点击链接时，需要整个框架页面跳转，可以在target中使用_parent或者_top。

五、表格

用来展示数据的多行多列的结构。
作用：1.展示数据。2.用来布局。（较早期使用，现在不推荐使用）

语法：

<table border="1px" width="800px" align="center"><!-- 定义表格开始 -->
    <caption>学生信息表</caption><!-- 表格标题 -->
    <thead><!-- 定义表格头部，可以不写 -->
        <tr><!-- 定义表格一行 -->
            <th>编号</th><!-- 定义表格每一列的标题，自动加粗加黑居中 -->
            <th colspan="3">基本信息</th><!-- 合并多列，由于表格是以行为单位，所以合并列对于其他行没有影响 -->
        </tr>
    </thead>

    <tbody><!-- 定义表格内容 -->
        <tr align="center">
            <td>1</td><!-- 定义表格每一行的每一列 -->
            <td>张三</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td align="center">李四</td>
            <td>21</td>
            <td rowspan="3">女</td><!-- 合并多行，由于表格是以行为单位，所以合并行会影响其他行，此处导致其他行少一格 -->
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>22</td>
            <!-- 此处少一格 -->
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>23</td>
            <!-- 此处少一格 -->
        </tr>
    </tbody>
</table>

如果把一个表格设置宽度和高度，可以通过把内容放置到表格中来定位元素。

六、表单

是指用户能够提交信息给服务器的页面元素。表单包含文本框，密码框、单选按钮、复选按钮、下拉框、文件域、按钮等常见的元素。

<!-- 表单的定义开始，action表示提交到服务器的路径，method提交的方式：默认为get，也可以设置为post -->
<form action="1.html" method="get">
    <!-- 文本框，name表示提交到服务器的名称，id表示页面上的名称，value表示默认值 -->
    <input type="text" name="username" id="username" value="123" placeholder="用户名"/><br />
    <input type="password" name="pwd" id="pwd" placeholder="密码"/><br/><!-- 密码框 -->
    <!--单选按钮，一组需要实现互斥功能应该将name设置一致，check表示是否默认选中 -->
    性别：<input type="radio" name="sex" value="男"/>男
    <input type="radio" name="sex" checked="checked" value="女"/>女<br />
    <!-- 数字框，只能输入数字，旁边的箭头可以增减数字 -->
    <input type="number" name="age" placeholder="年龄"/><br />
    <!--复选框，可以选中，可以取消，可以同时选中多个 -->
    爱好：<input type="checkbox" name="hobby" value="打游戏"/>打游戏
    <input type="checkbox" checked="checked" name="hobby" value="睡觉"/>睡觉
    <input type="checkbox" name="hobby" value="看小说"/>看小说<br />
    <!-- 下拉框，默认选中第一个，可以通过selected来进行设置 -->
    职业：<select name="job">
    <option value="1">战士</option>
    <option value="2">刺客</option>
    <option value="3" selected="selected">ADC</option>
    </select><br />
    <!--日期框，可以选择日期，如果需要同时选择时间，可以使用datetime -->
    生日：<input type="date" name="birthday" /><br />
    <!--文件域，用来上传文件 -->
    照片：<input type="file" name="photo"/><br />
    <!--多行文本框，cols设置列数，rows设置行数 -->
    介绍：<textarea cols="40" rows="8" name="introduce"></textarea><br />
    <!--提交按钮用来将表单信息提交到服务器路径，重置按钮会将表单元素状态恢复到默认值，普通按钮需要用户定义其作用 -->
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
    <input type="button" value="普通按钮" onclick="alert('hello, world');"/>
</form>

后续接着更新中！敬请期待！！！！！！！！！！！！！！！！！！

缘灬小太阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html基础入门个人学习笔记(一)

一.HTML简介hyper text markup language 超文本标记语言超文本:：表示能够在页面上展示的内容不仅仅包含文本，还包含图片、视频、音频等。标记：页面上显示内容需要以<标记></标记>格式来展现。语言：与计算机交互的方式。HTML标签：页面内容主体。CSS样式：让页面内容变得美观（形状、颜色、大小等）JavaScript语言：让页面内容动态变化。二. HTML的基本结构html：整个文档head：头部标签，用来设置当前页面body：身
复制链接

扫一扫