HTML初识

最新推荐文章于 2024-08-22 16:43:17 发布

2301_82008104

最新推荐文章于 2024-08-22 16:43:17 发布

阅读量890

点赞数 25

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/2301_82008104/article/details/140856204

版权

本文是个人对HTML学习做的一些笔记以及个人对HTML在前端中的定位和作用的理解和看法

HTML是一种标记语言，定义了网页的基本结构。相对于传统编程语言来说学习成本更低，相比于老旧的Java的GUI学习更加便利，代码更有可读性，学习快的话几个小时就可以学完。作为前端三大组件最基础的部分，HTML负责把前端显示的页面基础布局，就像搭建最初的一间房子，而装修工作则交给CSS。

HTML中最主要内容就是大部分的标签，但是常用的标签实际上并不多，还是应该在平时练习当中自己体会哪种标签用的比较多，用的多了自然也会熟悉HTML的各种布局在各种网页可以运用灵活

以下是我的个人笔记作为分享：

HTML

定义：超文本标记语言

超文本：链接

标记：也叫标签，带尖括号的文本

基本骨架

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体
    </body>
</html>

html：整个网页

head：网页头部，存放给浏览器看的代码，例如CSS

body：网页主体：存放给用户看的代码

title：网页标题

属性名	作用
width	宽度
height	高度
background-color	背景色

属性	作用	说明
`alt`	替换文本	图片无法显示的时候现实的文字，解决加载问题
`title`	提示文本	鼠标悬停在图片上面的时候显示的文字
`width`	图片的宽度	值为数字，没有单位
`height`	图片的高度	值为数字，没有单位

属性	作用	特殊说明
`src`(必须属性)	音频URL	支持格式：MP3、Ogg，Wav
`controls`	显示音频控制面板
`loop`	循环播放
`autoplay`	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

属性	作用	特殊说明
`src`(必须属性)	视频URL	支持格式：MP4、WebM，Ogg
`controls`	显示视频控制面板
`loop`	循环播放
`muted`	静音播放
`autoplay`	自动播放	为了提升用户体验，浏览器支持在静音状态下自动播放

注释

<!--注释内容-->

路径

.	当前文件所在文件夹
..	当前文件上一级文件夹
/	进入某个文件夹里面

列表

作用：布局内容排列整齐的区域

分类：无序列表，有序列表，定义列表

无序列表

ul嵌套li，ul是无序列表，li是列表目录
<ul>
    <li>第一项</li>
    <li>第二项</li>
    ···
</ul>

ul标签里面只能包含li标签

li标签里面可以包含任何内容

有序列表

ol嵌套li，ol是有序列表，li是列表目录
<ol>
    <li>第一项</li>
    <li>第二项</li>
    ···
</ol>

ol标签里面只能包含li标签

li标签里面可以包含任何内容

定义列表

dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，，dd是定义列表的描述/详情
<dl>
    <dt>列表标题</dt>
    <dd>列表描述/详情</dd>
    ···
</dl>

dl标签里面只能包含dt和dd标签

dt和dd标签里面可以包含任何内容

表格

table嵌套tr，tr嵌套td/th

标签名	说明
`table`	表格
`tr`	行
`th`	表头单元格
`td`	内容单元格

提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线

表格结构标签

标签名	含义	特殊说明
`thead`	表格头部	表格头部内容
`tbody`	表格主题	主要内容区域
`tfoot`	表格底部	汇总信息区域

合并单元格

1、保留最左最上单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并：保留最上单元格，添加属性rowspan

跨列合并：保留最左单元格，添加属性colspan

2、删除其他单元格

表单

作用：收集用户信息

input标签

<input type="...">  //type属性值不同则功能不同

属性值	说明
`text`	文本框，用于输入单行文本
`password`	密码框，输入数据隐藏
`radio`	单选框
`checkbox`	多选框
`file`	上传文件

（颜色：color，日期：date，日期时间：datetime-local，周选择器：week，滑块：range(min，max，value)，数字：number(min,max,value,step(设置步长))）

单选框radio

属性名	作用	特殊说明
`name`	控件名称	控件分组，同组只能选中一个（单选功能）
`checked`	默认选中	属性名和属性值相同，简写为一个单词

性别：
<input type="radio" name="gender" checked>男     //两个gender相同触发单选
<input type="radio" name="gender">女

上传文件file

<input type="file" multiple>    添加multiple实现文件多选功能

占位文本

作用：提示信息

<input type="..."placeholder="提示信息">

下拉菜单

<select>
    <option> </option>
    <option>  </option>
    <option selected> </option>     //加selected菜单默认显示
    ...
</select>

文本域

作用：多行输入文本的表单控件

<textarea row="10" cols="50">...</textarea> row能放多少行，超过下拉框显示    cols每行多少个

右下角有拖拽功能，未来都会禁用

用css设置尺寸

label标签

作用：网页中，某个标签的说明文本

用label绑定文字和表单的控件关系，增大表单控件的点击范围

写法一

label标签只包裹内容，不包裹表单控件

设置label标签的for属性值和表单控件的id属性值相同

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

写法二

使用label标签包裹文字和表单控件，不需要属性

<label><input type="radio">女</label>

按钮

<button type="">按钮</button>

type属性值	说明
submit	提交按钮，点击后提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合js使用

<form action="">    <!--action=""发送数据的地址-->
    ...
    <button> </button>  <!--form表单区域，button被form嵌套才能使用 -->
    
</form>

字符实体

作用：在网页中显示预留字符（和显示转义字符\同理）

符号	实体名称(未加;)
空格	`&nbsp`
<	`&lt`
>	`&gt`

敲空格网页只识别一个

2301_82008104

关注

25
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
HTML初识

<dt>列表标题</dt><dd>列表描述/详情</dd>···
复制链接

扫一扫

HTML初识

HTML

基本骨架

标签

标签语法

标签的关系

排版标签

标题标签

段落标签

换行和水平线标签

文本格式化标签

图像标签

超链接标签

音频标签

视频标签

无语义的布局标签

注释

路径

列表