关于HTML的笔记

2301_81208699

已于 2024-10-27 15:58:14 修改

阅读量1k

点赞数 21

CC 4.0 BY-SA版权

文章标签： html 笔记前端

于 2024-10-27 15:54:05 首次发布

本文链接：https://blog.youkuaiyun.com/2301_81208699/article/details/143112762

一、HTML初识

（一）HTML基础认知

1.基础概念铺垫

（1）网页认识

组成部分-文字、图片、音频、视频、超链接
本质 - 代码
转换 - 浏览器（解析+渲染）

（2）浏览器

网页显示、运行的平台（必备）
五大：IE、火狐Firefox、谷歌Chrome、Safari、欧朋
渲染引擎（浏览器内核）不同，解析代码时的速度、性能、效果

2.HTML初体验

HTML：超文本标记语言
HTML页面固定结构：整体html、头部head、标题title、主体body

3.基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

（二）标签学习

1.标签概念

标签又称元素,是HTML的基本组成单位
标签分为单标签和双标签
双标签：

<标签名> 标签体 </标签名>

示例：

<marquee>吕倩雨</marquee>

单标签：

<标签名/>

注：/可省略

示例：

<input/>

标签之间的关系：并列关系、嵌套关系，可以使用Tab键进行缩进

<marquee>

吕倩雨

<input/>

</marquee>

2.标签属性

用于给标签提供附加信息
可以写在起始标签或单标签中，例如:

<marquee loop="1" bgcolor="green">吕倩雨</marquee>
<input type="password">

有些特殊的属性，没有属性名，只有属性值，例如：

<input disabled>

注意：

1.不同的标签有不同的属性，也有一些通用属性（在任何标签内都能写）

2.属性名、属性值不能乱写

3.标签中不要出现同名属性，否则后面的会失效，例如：
<input type="password" type="text">

注释：快捷键：ctrl+/

3.排版标签

标签名	标签含义	单/双标签
h1-h6	标题	双
p	段落	双
div	没有任何含义，用于整体布局（生活中的包装袋）	双

注意：

h1最好只写一个
h1-h6不能互相嵌套
p标签内不能有h1-h6、p、div标签

4.语义化标签

（1）概念：用特定标签表达特殊含义

（2）原则：标签的默认效果不重要，重要的是语义

（3）优势：代码清晰，可读性强；有利于SEO（搜索引擎优化）

5.文本标签

常用文本标签
标签名	标签含义	单/双标签
em	着重阅读的内容	双
strong	十分重要的内容（语气比em要强）	双
span	没有语义，用于包裹短语的容器	双

6.图片标签

标签名

标签语义

常用属性

单/双标签

img

图片

src：图片路径（地址）

alt：图片描述

width：图片宽度

height：图片高度

单

二、HTML基础

（一）超链接

1.概念

标签名

标签含义

常用属性

单双标签

超链接

href：要跳转的具体位置

target:要跳转时如何打开页面，常用值如下：_self:在本页签中打开

_blank:在新页签中打开

双

2.跳转到页面

<a href="https://www.baidu.com" target="_blank">到百度</a>



<a href="./1_HTML/01_HTML初体验 .html" target="_self">到01_HTML初体验</a>

跳转文件与跳转页面类似

3.跳转锚点

（1)设置锚点

<a name="test1"></a>



<h2 id="test2">我是一个位置</h2>

具有href属性的是超链接，具有name属性的是锚点

id后面最好别是数字开头

（2）跳转锚点

<a href="#test1">去test1锚点</a>



<a href="#">回到顶部</a>



<a href="demo.html#test1">去demo.html的test1锚点</a>

（二）列表与表单

1.有序列表

概念：无顺序或不侧重顺序的列表

<h2>做一件事需要几步</h2>

<ol>

<li>第一步</li>

<li>第二部</li>

<li>第三步</li>

</ol>

2.无序列表

概念：无顺序或不侧重顺序的列表

<h2>做一件事需要几步</h2>

<ul>

<li>第一步</li>

<li>第二部</li>

<li>第三步</li>

</ul>

3.自定义列表

概念：自定义列表（一个包含术语名称以及术语描述的列表，dl）

一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述。
dt,dd可连续多个

4.列表嵌套

概念：列表中的某项内容，又包含一个列表，解构写完整

5.表格

（1）基本结构

表格涉及到的标签：

table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）

（2）常用属性

<table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度。
默认情况下，每列的宽度，得看这一列单元格最长的那个文字。
给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了。
给某个th或 td 设置了高度之后，他们所在的那一行的高度就确定了。

（3）表格常用属性列举
border属性
表示边框宽度

width与height属性
表示表格的宽度和高度
放在table标签中时，表示宽度/高度至少为xxx px

cellspacing属性
表示单元格与单元格之间的距离

cellpadding属性
表示表格单元格边框与内容之间的距离

bordercolor属性
表示外边框颜色

bgcolor属性
表示单元格背景颜色

align与valign属性
表示单元格内容行与列的位置信息，align属性可选left center right，valign属性可选top middle bottom

colspan与rowspan属性
表示跨列与跨行的数目

6.常用标签

7.表单

（1）概念：一个包含交互的区域，用于收集用户提供的数据。

（2）常用表单控件

文本输入框：<input type="text">

name 属性：数据的名称。
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。

密码输入框：<input type="password">

name 属性：数据的名称。
value 属性：输入框的默认输入值（一般不用，无意义）。
maxlength 属性：输入框最大可输入长度。

单选框：
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

radio：单选
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
value 属性：提交的数据值。
checked 属性：让该单选按钮默认选中。

复选框：
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

checkbox：多选
name 属性：数据的名称。
value 属性：提交的数据值。
checked 属性：让该复选框默认选中。

隐藏域：<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。

name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据。

提交按钮：
第一种：<input type="submit" value="点我提交表单">
第二种：<button>点我提交表单</button>

button 标签 type 属性的默认值是 submit 。
button 不要指定 name 属性
input 标签编写的按钮，使用 value 属性指定按钮文字。

重置按钮：
第一种：<input type="reset" value="点我重置">
第二种：<button type="reset">点我重置</button>

button 不要指定 name 属性.
input 标签编写的按钮，使用 value 属性指定按钮文字。

下拉框：
<select name="place">
<option value="冀">河北</option>
<option value="鲁">山东</option>
<option value="晋" selected>山西</option>
<option value="粤">广东</option>
</select>

1.name 属性：指定数据的名称。
2.option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）
3.option 标签设置了 selected 属性，表示默认选中。

label标签
label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
两种与 label 关联方式如下：

让 label 标签的 for 属性的值等于表单控件的 id 。
<label for="nan">男</label>
<input id="nan" type="radio" name="gender" value="male">
把表单控件套在 label 标签的里面
<label>
<input type="radio" name="gender" value="female" >女
</label>