HTML初学笔记

最新推荐文章于 2022-03-07 09:33:43 发布
最新推荐文章于 2022-03-07 09:33:43 发布
阅读量1.3k 收藏 10
点赞数 4
分类专栏： 笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hcy00123/article/details/115611202
版权

文章目录

前言

本文笔记基于b站黑马程序员的javaweb的视频教程

ps:文中的使用方法的< >中加了空格，我不知道怎样才能不用空格打出来0.0

以下是本篇文章正文内容

一、HTML的简述

html又叫做超文本标记语言。
那么如何了解它的意思呢？我们不妨把这七个字拆成四部分来理解。

  1. 文本:相当于记事本里的文字，传递信息。
  2. 超文本:是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
  3. 语言:一种工具。
  4. 标记:标签。
    所以html是一种由各种各样标签组成的标记语言。

二、HTML的基本结构

基本结构代码如下：

<html>
    <head></head>
    <body>给用户展示的部分</body>
</html>

三、HTML基本标签

1. 字体标签

字体标签font：用于展示效果中修饰文字的样式。

  使用方法：<font 属性名=“属性值”>文本</ font>

常见属性名

  1. size: 控制字体的大小 。
  2. color：控制字体的颜色 。
  3. face：控制字体的样式 。

实例

<font size="3" color="red" face="宋体">今天天气真好</font>

效果展示

今天天气真好

2. 文本控制标签

① 标题标签 h: 用于展示效果中划分标题，其中h1最大，h6最小。

  使用方法: <h1 属性名=“属性值”>文本</ h1>

常见属性名

  1. align:标题的对齐方式。
      属性值left：标题居左；right：标题居右；center：标题居中。

② 段落标签 p : 用于展示效果中划分段落，并且自动在段前段后加空白行。

  使用方法: <p 属性名=“属性值”>文本</ p>

常见属性名

  1. align:段落的对齐方式。
      属性值left：段落居左；right：段落居右；center：段落居中。

③ 水平线标签 hr : 将段落与段落之间隔开，使得文档结构清晰，层次分明。

  使用方法: < hr 属性名=“属性值”/>

常见属性名

  1. align: 水平线的对齐方式。
      属性值left：水平线居左；right：水平线居右；center：水平线居中。
  2. size: 控制水平线的粗细。
  3. color：控制水平线的颜色。
  4. width：控制水平线的宽度。

④ 换行标签 br : 用于展示效果中换行。

  使用方法: < br />

实例

<h1 align="center">一级标题</h2>
<h2 align="left">二级标题</h2>
<p align="right">今天天气真好</p>
<br/>
<hr align="right" size="2" color="#0066FF" width="80%">

效果展示

一级标题

二级标题

今天天气真好


3. 格式化标签

① 字体加粗标签 b或strong：b定义加粗文本，strong定义强调文本。

  使用方法: < b>< /b>和< strong>< /strong>

② 斜体标签 i和em：i 定义斜体文本，em定义强调文本。

  使用方法: < i>< /i>和< em>< /em>

③ 删除线文本标签 del：用于在展示效果中的字体上增加删除线。

  使用方法: < del>< /del>

④ 下划线文本标签 ins：用于在展示效果中的字体上增加下划线。

  使用方法: < ins>< /ins>

实例

<p><b>今天天气真好</b></p>
<p><strong>今天天气真好</strong></p>
<p><i>今天天气真好</i></p>
<p><em>今天天气真好</em></p>
<p><del>今天天气真好</del></p>
<p><ins>今天天气真好</ins></p>

效果展示

今天天气真好

今天天气真好

今天天气真好

今天天气真好

今天天气真好

今天天气真好

4. 图像标签

① 常见图片格式：GIF格式，PNG格式，JPG格式。

② 图像标签img：用于在页面效果中展示一张图片。

  使用方法: < img src=" 图像URL" 属性名=“属性值”/>

常见属性值

  1. src：指明图片的路径。（必有属性）
  2. width: 图片的宽度。
  3. height：图片的高度。
  4. alt:图像不能显示时的替换文本。
  5. border：图像边框的宽度。
  6. align：图像的对齐方式。
      属性值left：图像居左；right：图像居右；center：图像居中；
         top：图像顶端与文本第一行文字对齐；
         middle：图像水平中线与文本第一行文字对齐；
         bottom：图像底端与文本第一行文字对齐。

③ 宽度和高度的设置：默认的单位为px—像素，例如：

width=“400px”。除此之外还可以设置百分比，例如width=“50%”。

④ 图片路径的写法：
  内网路径：
    绝对路径：文件在硬板上具体的位置。
      例如：C\JavaWeb001_html\img\c_1.jpg
    相对路径：
      例如：./img/c_1.jpg
      . ./表示上一层目录
      ./表示当前的那层目录
  互联网路径：
    必须在前面加上http://。
      例如：http://www.baidu.com/xxx.jpg

实例

<img src="C\JavaWeb001_html\img\c_1.jpg" alt="这是一张图片" width="400px" height="400px">
<img src="./img/c_1.jpg" border="1" align="top">
<img src="http://www.baidu.com/xxx.jpg">

5. 列表标签

① 无序列表标签 ul：用于在效果中定义一个无序列表。

  使用方法: < ul>< /ul>

② 有序列表标签 ol：用于在效果中定义一个有序列表。

  使用方法: < ol>< /ol>

③ 列表条目标签 li：用于在效果中定义一个列表条目。

  使用方法: < li>< /li>

实例

<ul>
	<li>编程</li>
	<li>阅读</li>
</ul>
<ol>
	<li>编程</li>
	<li>阅读</li>
</ol>

效果展示

  • 编程
  • 阅读
  1. 编程
  2. 阅读

6. 超链接标签

① 超链接标签 a：用于在效果中定义一个可以点击跳转的链接。

  使用方法: < a>< /a>

常见属性名

  1. href: 后接超链接跳转的路径。（必有属性）
        本机路径：相对路径和绝对路径。（前面有提及）
        外网路径：http://地址
        页内跳转：#

② 超链接正常工作：a标签里有内容；a标签必须有href属性。

③ 注意：a标签中的内容可以是文字，也可以是图片；
    href属性不仅仅可以链接到html上，也可以链接到其他文件上。

实例

<a href="https://www.bilibili.com/video/BV1mE411h7Co?p=1">链接至外网</a>
<a href="C\JavaWeb001_html\img\c_1.jpg">链接至文件夹中的图片</a>
<a href="#one">页面内跳转</a>

效果展示

链接至外网
链接至文件夹中的图片
页面内跳转

7. 表格标签

① 表格标签 table：用于在效果中定义一个表格。

  使用方法: < table>< /table>

② 表格行标签 tr：用于在效果中定义一个表格行。

  使用方法: < tr>< /tr>

③ 表格单元格标签 td：用于在效果中定义一个表格行中的单元格。

  使用方法: < td>< /td>

④ 表格的表头单元格标签 th：用于在效果中定义一个表格行中的表头单元格。

  使用方法: < th>< /th>

    注意：th与td相比，th的内容体会在表格中自动变粗居中。

⑤ 单元格合并：th或者td都有俩个单元格合并的属性。

  1. colspan：跨列合并单元格。
  2. rowspan：跨行合并单元格。

    注意：被合并的单元格必须被删除；合并几个单元格，属性值就写多少。例如：< td rowspan=“2”>< /td> 和 < th colspan=“2”>< /th>

实例

<table>
	<tr>
		<th>姓名
		<th>班级
	</tr>
	<tr>
		<td>小明
		<td>1班
	</tr>
</table>

效果展示

姓名 班级
小明 1班

8. 块标签

① 行级块标签 span：用于在页面中的一行上定义一个块，进行内容显示。有多少内容就会占用多大的页面空间。

    注意：span不会自动换行，适用于少量数据展示。

  使用方法: < span>< /span>

② 块级块标签 div：用于在整个页面中定义一个块，默认占满一行，进行内容显示。

  使用方法: < div>< /div>

    注意：div会自动换行，默认占满一行，适用于大量数据展示。

实例

<span>今天天气</span><span>真好</span>
<div>wdaw</div><div>真好</div>

效果展示

今天天气真好

今天天气
真好

9. 表单标签

① 表单标签form：用于定义一个表单，用于提交用户填写的数据。

常见属性名

  1. action：将数据提交到何处。
      默认提交到本页。

  2. method：将数据以何种类型提交。
      默认为get。
       提交方式可定义为 get 或者 post

② 输入项标签input：用户可以在该标签上通过选择或填写的方式进行数据的输入。

常见属性名

  1. type：设置该标签的种类。

      属性值 text：文本框。
      属性值 password：密码框。
      属性值 radio：单选框。
      属性值 checkbox：多选框。
      属性值 submit：提交按钮。
      属性值 reset：重置按钮。
      属性值 file：附件框。
      属性值 hidden：隐藏框。
      属性值 button：普通按钮，需要和js事件一起使用。

  2. name：对单选框、多选框进行内容分组。
  3. value：设置该标签对应的参数值；作为按钮的名字。
  4. checked：设置单选框、多选框的默认选中状态。
  5. readonly：设置该标签的参数值只读，用户无法进行修改。（数据可以正常提交）
  6. disabled：设置该标签不可用，参数值无法修改，且参数值也无法提交。

实例

<form>
	id：<input type="hidden" name="uid" value="dhi23ka#bw"><br><!-- 选框被隐藏,用于赋予独一无二的id -->
	用户名：<input type="text"><br>
	密码：<input type="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="code" checked="checked">编程
	     <input type="checkbox" name="hobby" value="read">阅读
	     <input type="checkbox" name="hobby" value="run">跑步<br>
	照片：<input type="file" name="photo"><br>     
	     <input type="submit" name="提交">
	     <input type="reset">
	     <input type="button" value="我是按钮">
</form>

效果展示
在这里插入图片描述
③ 选择框标签select：定义一个选择框。

常见属性名

  1. name：设置该标签对应的参数名。
  2. multiple：设置该标签内容为全部显示，并且可以进行多项选择提交，默认为单选。

④ 选项标签option：用于为一个选择框添加一个选项。

常见属性名

  1. value：设置需要提交的参数值。
  2. selected：设置选项为默认选中。

实例

<form>
	<select name="text1">
		<option value="">请选择城市</option>
		<option value="beijing" selected="selected">北京</option>
		<option value="shanghai">上海</option>
		<option value="guangzhou">广州</option>
	</select>
	<br>
	<input type="submit">
</form>

效果展示

在这里插入图片描述

⑤ 文本域标签：用户可以在该标签上通过输入进行数据的输入。

文本域与文本框的区别

  1. 文本框不能换行，文本域可以换行。
  2. 文本框参数值是value属性，文本域参数值是标签里的内容体。

常见属性名

  1. name：设置该标签对应的参数名。

实例

<form>
	个人简介：<textarea name="text2"></textarea>
	<input type="submit">
</form>

效果展示
在这里插入图片描述

感想

以上就是前几天学习内容的总结，本文仅仅简单记录了html基础，自学前端的路还很长，而之后我还会继续更新CSS和JavaScript的笔记。

（码字真的好累QaQ，真正体会到了其他博主的幸苦 😦）

不如自成宇宙℡
关注
专栏目录
HTML笔记
m0_59418670的博客
06-26 319
文章目录1.什么是HTML、CSS? 1.什么是HTML、CSS? 是做网站的编程语言。 浏览器把代码解析后的样子就是我们看到的网站，如何看到网页的原始代码呢？通过鼠标右键查看与网页源代码。 如何去写代码？写到哪里呢？ ...
HTML基础笔记
最新发布
2301_79235379的博客
07-31 805
（定义项目/名字）和（描述每一个项目/名字）一起使用。名词1名词1解释1名词1解释2
HTML 笔记
qq_41273406的博客
03-30 117
HTML 1.网页的组成 页面由三部分内容组成！ 分别是内容（结构）、表现、行为。 内容（结构）：是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用 html 技术来展示。 表现：指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用 CSS 技术实现 行为：指的是页面中元素与输入设备交互的响应。一般使用 javascript 技术实现。 2.HTML简介 Hyper Text Markup Language （超文本标记语言） 简写：HTML HTML 通过标签来标记要显示
HTML 笔记
好女绪的博客
08-13 796
HTML 笔记 这只是我关于HTML的笔记，完整的HTML教程请自行查看 w3cschool 或者 菜鸟教程。 HTML 结构 HTML的结构基本如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;网页标题&lt;/title&gt; &lt;meta http-equiv="Content-Type" ..
html笔记
gukai0615的博客
10-11 351
一.html基础 1.声明： html也有多个不同的版本，只有完全明白页面中使用的确切html版本，浏览器才能完全正确的显示html页面。这就是的用处 2.html标签中 lang=“en/zh”  表示代码是英文还是中文显示 en指英文可以省略 3.header标签内部添加  告诉浏览器以utf-8编码形式显示 4.元素划分 行元素：不换行 不能设置宽度和高度。即占用一整行，元素之
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
HTML笔记传智讲师视频笔记适合初学者
04-16
"HTML笔记传智讲师视频笔记适合初学者"这个标题暗示了这是一份针对初学者的教程资料，可能包含了从基础到进阶的HTML知识，通过传智讲师的教学方式来讲解。 描述中的"html学习笔记"表明这是关于HTML学习的过程记录，...
HTML笔记,html零基础入门视频课程（最适合初学者的教程）
04-24
本教程“HTML笔记,html零基础入门视频课程”是为初学者设计的一套系统学习资源，旨在帮助新手快速掌握HTML的基本概念和实际应用。 一、HTML基本结构 HTML文档由一系列的元素组成，这些元素通过标签来定义。每个HTML...
CXF webservice初学笔记
07-31
【CXF Webservice初学笔记】 Apache CXF 是一个开源的Web服务框架，它使得开发者可以轻松地创建和部署Web服务。本笔记将探讨CXF的基本概念、如何使用CXF构建Webservice以及与之相关的技术栈，如Spring、Struts2等。...
HTML设置字符集
Liyunhao_haoge的博客
10-01 1404
HTML设置字符集 <meta charset = "UTF-8"> GBK 包含简体中文和繁体字 charset: 字符集： UTF-8 全世界所有国家需要用到的字符 gb2312 简单中文 BIG5 包含了繁体字 ...
HTML笔记整理（个人笔记）
w3535222的博客
03-07 3832
个人笔记
HTML的基础使用
FFFPAG的博客
05-04 124
HTML 概念 最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言 超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本 标记语言：由标签构成的语言。<标签名称> 如html，xml 标记语言不是编程语言 语法 html文档后缀名 .html 或 .htm 标签分为： 围堵标签：有开始和结束标签。如 自闭和标签：开始标签和结束标签在一起。如 标签可以嵌套： 在开始标签中可以定义属性。属性是由键值对构成，值需要引号（单双都可）
HTML自学笔记：初学者指南
"这是一份HTML自学笔记，由田克传编撰，适合HTML初学者。笔记涵盖了HTML语言的基础知识，包括标签的各种属性，如Text、Link、Alink、Vlink、Background和Bgcolor等，以及如何设置网页的布局和背景。此外，还讲解了...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值