HTML学习笔记

最新推荐文章于 2024-08-13 10:10:57 发布

喜欢电影的小子

最新推荐文章于 2024-08-13 10:10:57 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/qq_41257074/article/details/119560968

版权

1.HTML

HTML是超文本标记语言。

2.常用标签

2.1标题标签

特点：独占一行，字号依次变大

 	<h1>标题标签</h1>
    <h1>标题一共六级选</h1>
    <h2>文字加粗一行显</h2>
    <h3>由大到小依次减</h3>
    <h4>从重到轻随之变</h4>
    <h5>语法规范书写后</h5>
    <h6>具体效果刷新见</h6>

2.2段落标签和换行标签

**语义：**可以把HTML文档分割成几个段落

<p>一段正文</p>

特点：

文本在一个段落中会根据浏览器窗口大小自动换行
段落和段落之间保有空隙

<br/>换行标签

特点：

是个单标签
简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

2.3文本格式化标签

**语义：**突出重要性，比普通文字更重要

	定义粗体文字
	定义着重文字
	定义斜体字
	定义小号字
	定义加重语气
	定义下标字
	定义上标字
	定义下划线
	定义删除字

2.4
和

<div>和<span>没有语义，当盒子来使用。页面布局使用

特点：

1.<div>标签用来布局的，一行只能放一个。大盒子
2.<span>小盒子

2.5图像标签和路径

1.图像

标签用于定义HTML页面中的图像

<img src="图像的URL">

src是img标签的必须属性，用于指定图像文件的路径和文件名

图像标签的其他属性：

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放在图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

注意：

图像标签可以拥有多个属性，必须写在标签名的后面
属性之间部分前后先后顺序，标签名与属性，属性与属性之间均以空格分开
属性采取键值对的格式，值用双引号进行包裹，属性=“属性值”

2.路径

**目录文件夹：**普通的文件夹，里面存放了做页面所需要的相关素材，比如html文件，图像等。

**根目录：**打开目录文件夹的第一层文件夹

路径可以分为：

相对路径：图片相对于HTML页面的位置 /下一级 …/上一级
绝对路径：指目录下的绝对位置，可以是网络的地址

2.6超链接标签

在HTML标签中，a标签用来定义超链接，作用是从一个页面链接到另一个页面

链接的语法格式

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

两个属性的作用:

属性	作用
href	用于指定链接目标的URL地址，必须属性，具有超链接的功能
target	用于指定超链接页面的打开方式，其中_self为默认值，_blank为在新窗口打开的方式

    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <h4>2.内部链接:网站内部页面之间的相互链接</h4>
    <a href="01标题标签.html">标题标签</a>
    <h4>3.空链接:#</h4>
    <a href="#">无连接</a>
    <h4>4.下载链接:地址链接的是文件压缩包的形式</h4>
    <a href="img.rar">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg" alt=""></a>

锚点链接：

在链接文本的href属性中，设置属性为**#名字**的形式
找到目标位置标签，里面添加一个id属性=刚才的名字

2.7注释

注释以“<!–开头

以“–>”结束

快捷键：Ctrl+/

2.8特殊字符

查找特殊字符网址：https://www.runoob.com/tags/ref-entities.html

2.9表格标签

表格不是用来布局页面的，而是用来展示数据的

<table>用来定义表格的标签
    <tr>用来定义表格中的行
    	<td>单元格内的文字</td>用来定义单元格
    </tr>
</table>

参考文档：https://www.runoob.com/html/html-tables.html

th 标签标示HTML表格的表头部分（table head的缩写），表头单元格的文字会加粗居中

表格属性：

属性名	属性值	描述
align	left，center，right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有表框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

表格的结构标签：

thead标签是表格的头部区域，tbody标签是表格的主体区域

合并单元格：

合并单元格的方式

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”
目标单元格

跨行：最上侧单元格为目标单元格，写合并代码

跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲
1. 先确定是跨行还是跨列
2. 找到目标单元格，协商合并方式=合并的单元格数量
3. 删除多余的单元格

2.10列表标签

列表最大的特点就是整齐、整洁、有序作为布局更加自由方便

参考文档地址：https://www.runoob.com/html/html-lists.html

无序列表：

基本语法格式：

<ul>
	<li>列表项</li>
</ul>

无序列表的哥哥列表项之间没有顺序级别之分，是并列的
ul 中只能嵌套 li
li 可以放其他元素，相当于一个容器

有序列表：

基本语法格式：

<ol>
    <li>列表项</li>
</ol>

自定义列表：

基本语法格式：

<dl>
    <dt>名词1</dt>
    <dd>名词解释</dd>
</dl>

dd 里面只能包含 dt
dt 和 dd个数没有限制，经常一个 dt 对应多个 dd

2.11表单标签

参考文档地址：https://www.runoob.com/html/html-forms.html

在html中，一个完整的表单通常由表单域、表单控件和提示信息组成。

form 会把范围内的表单元素信息提交给服务器

语法规范：

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

表单控件（元素）

1.input 表单元素

<input type="属性值">

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和浏览按钮，供上传文件
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单数据发送到服务器
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符

name 和 value 是每个表单元素都有的属性值，主要是给后台人员使用
name 表单元素的名字，要求单选按钮和复选框都要有相同的 name 值

    <form>
        用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br> 密码：
        <input type="password" name="password" value=""><br>
        <!-- 单选按钮和复选框按钮设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
        性别：男<input type="radio" name="sex">女<input type="radio" name="sex" checked="checked"><br>
        <!-- 复选框 -->
        爱好：吃饭 <input type="checkbox" name="hobby" checked="checked"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆
        <input type="checkbox" name="hobby"><br>
        <!-- 点击了提交按钮，可以把表单域form里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以把原表单元素初始默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 -->
        <input type="button" value="获取手机验证码"><br>
        <!-- 文件域 上传文件使用的 -->
        上传头像：<input type="file">
    </form>

2.label标签

label 标签用于绑定一个表单元素

语法定义：

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

**核心：**label 标签的 for 属性应当与相关元素的 id 属性相同

    <label for="text">用户名：</label> <input type="text" id="text">
    <input type="radio" id="man"> <label for="man">男</label>

3.select下拉表单元素

select 可以控制定义下拉列表

<select>
    <option>选项1</option>
</select>

select 中至少包含一对 option
在 option 中定义 selected="selected"时，当前项即为默认选中项

    籍贯：
    <select name="" id="">
        <option value="">珠海</option>
        <option value="">广州</option>
        <option value="">深圳</option>
        <option value="" selected="selected">中山</option>
    </select>

4.textarea文本域表单元素

常见于留言板、评论等

语法：

<textarea rows="" cols="">
	文本内容
</textarea>

通过textarea标签可以轻松地创建多行文本输入框
cols=“每行的字符数”，cols=“显示的行数”

综合案例

<body>
    <h4>青春不常在</h4>
    <table width="500px">
        <!-- 第一行 -->
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" id="man" checked="checked"> <label for="man"><img src="images/man.jpg">男</label>
                <input type="radio" name="sex" id="woman"> <label for="woman"><img src="images/women.jpg">女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日：</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">1999</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">一月</option>
                    <option value="">二月</option>
                    <option value="">三月</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择日--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区：</td>
            <td>
                <input type="text" value="北京">
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况：</td>
            <td>
                <input type="radio" name="marry" checked="checked"> 未婚<input type="radio" name="marry"> 已婚<input type="radio" name="marry"> 离异
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历：</td>
            <td>
                <input type="text" value="本科">
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型：</td>
            <td>
                <input type="checkbox" name="love"> 温柔的
                <input type="checkbox" name="love"> 可爱的
                <input type="checkbox" name="love"> 小鲜肉
                <input type="checkbox" name="love"> 老腊肉
                <input type="checkbox" name="love" checked="checked"> 都喜欢
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍：</td>
            <td>
                <textarea name="" id="" cols="30" rows="10">个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁</li>
                    <li>单身</li>
                    <li>真诚</li>
                </ul>
            </td>
        </tr>
    </table>
</body>