html入门笔记

一、HTML 简介
1、HTML是什么?
2、什么是HTML标签?
二、HTML 文档结构
1、HTML基本结构
2、文档类型声明标签
3、lang语言属性
4、字符集与编码
三、HTML 基础标签
1、标题标签
2、段落标签
3、空格标签
4、注释标签
5、换行标签
6、盒子标签
7、水平线标签
8、预格式化文本标签
9、文本格式化标签
10、图像标签
11、超链接标签
12、列表标签
13、表格标签
14、表单标签
四、HTML 基础 (理解)
15、文本框和文本域的区别
一、文本框与密码框
二、select下拉表单
三、文件域和按钮
四、单选框和复选框
16、常见属性解析
17、特殊字符
18、锚点定位
一、HTML 简介
1、HTML是什么?
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2、什么是HTML标签?
HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的,例如<body>和</body>
有些特殊的标签必须是单个标签,例如<br>
标签对中的第一个标签是开始标签,第二个标签是结束标签

---------下面是展示------

 

<html>
<head>
<title>前端开发</title>
</head>
<body>
<h1>HTML</h1>
<p> HTML超文本标记语言,是用来描述网页的一种标准语言。</p>
</body>
</html>

--------展示---------

二、HTML 文档结构

1、HTML基本结构

 

标签名 定义 说明
<!DOCTYPE HTML>     文档声明 声明这是一个HTML文档
<html></html>               HTML标签 告诉网页浏览器,整个网页是从这里开始的,然后到结束
<head></head>           文档的头部 在head标签中必须包含title标签
<title></title>                文档的标题 显示在搜索引擎结果中的页面标题
<body></body>          文档的主体 元素包含文档的所有内容

HTML 文档是用来描述网页的,包含 HTML 标签和纯文本。
HTML文档的后缀名必须是.html.htm
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

 

2、文档类型声明标签

<!DOCTYPE> 是文档类型声明标签
<!DOCTYPE> 声明位于文档中的最前面的位置
<!DOCTYPE> 作用:告诉浏览器使用哪种HTML版本来显示网页

 

3、lang语言属性

<html lang="en">

  • en 定义语言为英语
  • zh-CN定义语言为中文
    lang语言属性作用:定义当前文档显示的语言

 

4、字符集与编码

<meta charset="UTF-8">

  • <meta>标签:元数据
  • charset 属性:用来规定 HTML 文档应该使用哪种字符编码
  • 常用的编码有GB2312、GBK 和 UTF-8,UTF-8基本包含了全世界所有国家需要用到的字符

 

三、HTML 基础标

1、标题标签

<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</body>

  • 标题标签 可使内容加粗
  • 标签序号越小 字号越大
  • 每个标题独占一行

2、段落标签

<p></p>

<body>
<p>段落标签</p>
<p>段落1</p>
<p>段落2</p>
</body>

  • 可以对HTML文档内容分为多个段落。

 

3、空格标签

&nbsp;

&nbsp;

  • 在html代码中每输入一个&nbsp;,就表示一个空格

4、注释标签

<!-- -->

<!-- 注释语句 -->

  • 注释的快捷键是: ctrl + / 或者 ctrl +shift + /
  • 注释是给人看的,目的是为了更好的解释这部分代码是干啥的, 程序是不执行这个代码的

5、换行标签

<br>

<br>

  • 单词缩写: break 打断 ,换行
  • 在HTML中,如果希望某段文本强制换行显示,就需要使用换行标签<br>

6、盒子标签

<div> </div> <span></span>

<div> 这是头部 </div> <span>今日价格</span>

  • <div> </div> <span></span> 是没有语义的 是我们网页布局主要的2个盒子
  • <div> </div> 一行只能放一个
  • <span></span> 一行上可以放多个

7、水平线标签

<hr/>

<hr/>是单标签

  • 单词缩写: horizontal 横线
  • <hr/>就是创建横跨网页水平线的标签
  • 水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。

8、预格式化文本标签

<pre></pre>

<pre>

此例演示如何使用 pre 标签

对空行和 空格

进行控制

</pre>

  • <pre></pre>标签可定义预格式化的文本
  • 预格式化文本就是按照我们预先写好的文字格式来显示页面, 保留空格和换行

9、文本格式化标签

标签显示效果
<strong></strong><b></b> 加粗
<i></i><em></em> 斜体
<s></s><del></del> 加删除线
<u></u><ins></ins> 加下划线
  • <b></b>只是加粗。 <strong><strong> 除了可以加粗还有强调的意思,语义更强烈。

10、图像标签

<img/>
语法如下:

<img src="图像URL" />

  • 该语法中src属性用于指定图像文件的路径和文件名
属性属性值说明
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像边框的宽度
  • 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
  • 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
  • 任何标签的属性都有默认值,省略该属性则取默认值。
  • 采取 键值对 的格式 key=“value” 的格式

下面为参考代码:

<body>
<!-- 正常的图片 -->
< img src="D:\JPG\1.jpy">
<!-- 设置图片的宽度 -->
< img srcm"D:\JPG\1.jpg" width="200">
<!-- 设置了高度的标签 -->
< img src="D:\JPG\1.jpg" height="200">
<!--同时设置了高度和宽度的标签-->
< img src="D:\JPG\1.jpg" width="100" height="200">
<!-- 设置了标题的标签 -->
< img src="D:\JPG\1.jpg" title="白雪公主">
<!-- 用alt属性来显示图片未加载出来 -->
< img src="D:\JPG\1.Jpg" alt="这是一张图片">
</body>

 

11、超链接标签

<body>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
</body>

属性作用
href 指定链接目标的url地址
target 指定连接页面的打开方式,_self为默认值,_blank为在新窗口中打开
  • href=“#”,表示该链接暂时为一个空链接

12、列表标签

标签名定义说明
<ol></ol> 有序列表 包含<li></li>,有顺序,使用情况较少
<ul></ul> 无序列表 包含<li></li>,无顺序,最常用的列表
<dl></dl> 自定义列表 包含<dt><dd>,<dt><dd>里面可以放任何标签

<body>
<ul>
<li>无序标签</li>
<li>无序标签</li>
</ul>
<ol>
<li>有序标签</li>
<li>有序标签</li>
</ol>
<dl>
<dt>自定义标签</dt>
<dd>自定义标签</dd>
</dl>
</body>

 

13、表格标签

<body>
<table>
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr>
<tr> <td>小明</td> <td>男</td> <td>22</td> </tr>
<tr> <td>小红</td> <td>女</td> <td>21</td> </tr>
</table>
</body>

 

    • <table></table>用于定义一个表格标签。


    • <th></th> 用于定义表格中的表头,必须嵌套在<tr></tr>标签中。


    • <tr></tr> 用于定义表格中的行,必须嵌套在<table></table>标签中。


    • <td></td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。

14、表单标签

一个完整的表单通常由表单域,表单控件和提示信息三部分组成
1、表单域
<form></form>标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>

属性属性值作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式,其取值为get或post。
name 名称

用于指定表单的名称,以区分同一个页面中的多个表单。

 

  • 每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。

2、表单控件

① input 控件:

<input type="属性值" value="你好">

  • <input/>标签为单标签 input是输入的意思
  • type属性设置不同的属性值用来指定不同的控件类型

② textarea 控件

<textarea col="列" row="行">
文本内容
</textarea>

  • 通过textarea控件可以轻松创建多行文本输入框.
  • cols=“列数” rows=“行数”

③ <label>标签
1、第一种用法就是用label直接包括input表单。

<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>

  • 适合单个表单选择

2、第二种用法 for 属性规定 label 与哪个表单元素绑定。

  • for的属性值应和id的属性值相同

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

  • <label></label>用于绑定一个表单元素
  • 当我们鼠标点击<label></label>里面的文字时, 光标会定位到指定的表单里面,用来增加用户体验

四、HTML 基础 (理解)

15、文本框和文本域的区别

表单名称区别默认值显示应用场景
input type="text" 文本框 只能显示一行文本 单标签,通过value显示默认值 用户名、昵称、密码等
textarea 文本域 可以显示多行文本 双标签,默认值写到标签中间 留言板
  • 以下为案例:
  • 一、文本框与密码框

  • <body>
    <form>
    账号:<input type="text">
    密码:<input type="password">
    </form>
    </body>

  • type 属性设置为text是文本框
  • type 属性设置为 password 是密码框
  • 二、select下拉表单

  • <form>
    <select>
    <option selected="selected">地区</option>
    <option>北京</option>
    <option>上海</option>
    </select>
    </form>

  • <select>中至少包含一对<option>
  • <option>中定义 selected=“selected” 时,当前项即为默认选中项
  • 但是我们实际开发会用的比较少
  • 三、文件域和按钮

  • <body>
    <form>
    <input type="button" value="浏览文件"> <br>
    上传文件:<input type="file">
    </form>
    </body>

    • type 属性设置为file:是一个文件域,可以上传文件
    • type 属性设置为button:是一个按钮
      • 四、单选框和复选框

      • <body>
        <form>
        性别:男<input type="radio" name="sex"> 女 <input type="radio" name="sex">
        选课:政治<input type="checkbox" name="subject"> 历史<input type="checkbox"> 地理<input type="checkbox" name="subject">
        </form>
        </body>

        • type 属性设置为 radio 是单选框
        • type 属性设置为 checkbox 是复选框
        • name是表单元素的名字,单选框和复选框应有相同的name值

16、常见属性解析

1、type 属性

  • 这个属性通过改变值,可以决定了你属于那种input表单。
  • 比如 type = 'text' 就表示 文本框 可以做 用户名, 昵称等。
  • 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。

用户名: <input type="text" />
密 码:<input type="password" />

2.、value属性

用户名:<input type="text" name="username" value="请输入用户名">

  • value 表示默认的文本值。
  • 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。
    3、 name属性

用户名:<input type="text" name=“username” />

  • name主要作用就是用于区别不同的表单

4、checked属性

性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

  • 表示默认选中状态。 较常见于 单选按钮和复选按钮。

17、特殊字符

一些特殊的符号,我们再html 里面很难或者 不方便直接 使用, 我们此时可以使用下面的替代代码。

特殊字符描述字符的代码
  空格符 &nbsp;
< 小于号 &lt;
> 大于号 &gt;
& 和号 &amp;
± 正负号 &plusmn;
× 乘号 &times;
÷ 除号 &divide;
² 上标 &sup2;
  • 字符的代码是以运算符&开头,以分号运算符;结尾。
  • 他们不是标签,而是符号

18、锚点定位

通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:

1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集</h3>

2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) (拉关系) 我也有一个姓何的朋友。
<a href="#two">

 

快速记忆法:
好比找个人办事, 首先找到他,然后拉关系,最后看效果

最后修改:2022 年 11 月 27 日
如果觉得我的文章对你有用,请随意赞赏