HTML简单个人学习笔记

LTIR_752

于 2020-09-19 20:14:57 发布

阅读量436

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_42918142/article/details/108678709

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML学习

1. 网站与网页
2. HTML
3. HTML 列表
4. HTML 列表
5. 表单
6. 标签 <label>
7. 总结

1. 网站与网页

网站为网页的集合，一个网页通过HTML构建。
网页通过视频，图片，文字等元素构成，以 $. h t m l$ 或 $. h t m$ 文件生成

1.1 HTML

超文本标记语言（Hyper Text Markup Language）
作为标记语言（makrup tag），为标签的集合

1.2 浏览器与内核

内核：渲染引擎，读取网页内容，计算网页显示方式

1.3 Web标准

统一化展示
包含：
结构（structure）：网页元素整理分类，HTML
表现（Presentaton）：板式，颜色，动效，外观样式，CSS
行为（Behavior）：交互，响应，JS

2. HTML

2.1 标签关系

包含关系：

<head>
	<title></title>
</head>

并列关系：

<head></head>
<body></body>

2.2 基本结构标签（骨架标签）

<html> 根标签
<head> 文档头部
<title> 文档标题
<body> 文档主体

<html>
    <head>
        <title>标题部分</title>
    </head>
    <body>
	主体部分
    </body>
</html>

2.3. 一些初始化标签

<!DOCTYPE html>：声明当前页面为HTML5，在<html>上面位置

<html lang=“en”>：英文，zh-CN为中文，在有些浏览器，可以调用翻译接口

<meta charset = “UTF-8”>：网页字符集

2.4 常用标签

2.4.1 标题标签 <h1> - <h6>

存在6个等级的标签，等级越高，字体越大，字体越粗，独占一行，写在body中

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>

在这里插入图片描述

2.4.2 段落标签 <p> 换行标签 <br />

段落标签：根据浏览器大小自动换行，段落间存在间隙
换行标签：单标签，break，没有间隙

2.5 文本格式化标签——面向文字

2.5.1 加粗 <strong> <b>

<body>
	<strong>加粗</strong>
	<b>加粗2</b>
</body>

2.5.2 倾斜 <em> <i>

<body>
	<em>倾斜</em>
	<i>倾斜2</i>
</body>

2.5.3 删除线 <del> <s>

<body>
	<del>删除线</del>
	<s>删除线2</s>
</body>

2.5.4 下划线 <ins> <u>

<body>
	<ins>下划线</ins>
	<u>下滑2</u>
</body>

2.6 容器布局标签

2.6.1 跨行 <div>

分割分区，一行只能一个div

<body>
	<div>第一行</div>第一行2
	<div>第二行</div>第二行2
</body>

在这里插入图片描述

2.6.2 跨距 <span>

跨度，一行可以放多个

<body>
	<div>第一行</div>第一行2
	<div>第二行</div>第二行2
	<span>first</span>
	<span>second</span>
	<span>third</span>
</body>

在这里插入图片描述

2.7 图像标签

2.7.1 图像标签 <img>

单标签，src不能有空格
修改宽度或者高度，按比例缩放
同时修改宽度和高度，不等比例缩放
border一般用CSS设定，不建议设定的在VScode中为白色
键值对赋值属性= “属性值”
路径：下一级 /文件夹。上一级 …(俩点)/文件夹
网络路径也可以

<body>
	<img src="图像url(路径)" alt="图片无法显示时显示的文本" title="鼠标放在图像提示的文字"/>
	<img src="图像url(路径)" width="宽" height="高" border="边框粗细"/>
</body>

2.7.2 超链接 <a>

anchor
必须href：目标地址，http://或https://开头
必须target：_self 本窗口打开，_blank 新窗口打开

外部连接：与外部网页的链接，如 http://www.baidu.com
内部连接：本地项目内的网页，如 another_page.html
空连接：href="#"
下载连接：地址连接的是文件，如 href ="压缩包url路径"必须压缩包？
文件连接：所有的图片，视频均可做连接，会新窗口打开，不会下载，href ="文件url路径"
内部锚点连接，CSDN博客开头的那玩意儿。href = "# two"然后在标题上 <h3 id="two">

<body>
	<a href="跳转目标" target="目标窗口弹出方式"> 链接的方式,文本或图像 </a>
	<a href="https://www.baidu.com" target="_blank"> <img src="xxx.png" /> </a>
	 <a href="图片1.zip" > 下载 </a>
	 
	 <a href="#two"> 锚点跳转标题two </a>
     <h3 id="two">标题two</h3>
</body>

2.8 注释标签与特殊字符

2.8.1 注释 <!–注释–>

ctrl + /

<body>
  <!-- 注释 -->
</body>

2.8.2 特殊字符，空格等

&nbsp空格
<><>
在这里插入图片描述

3. HTML 列表

3.1 表格标签 <table> 行 <tr> 单元格 <td>

表格的主要作用：显示，展示数据

<body>
    <table><!--table最外面-->
        <tr><!--行-->
            <td>11</td><!--行内单元格-->
            <td>12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
    </table>
</body>

在这里插入图片描述

3.2 表头单元格<th>

表头加粗，居中

<body>
    <table>
        <tr>
            <th>头1</th><!--表头-->
            <th>头2</th>
            <th>头3</th>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
    </table>
</body>

在这里插入图片描述

3.3 表格属性建议CSS

写在<table>后，作为属性
align位置，left,right,center
border，边框，1或""，有或无
cellpadding，文字与单元格的距离，默认1像素
cellspacing，单元格之间的距离，默认2像素
width与height，宽与高

3.4 表格的结构化标签<thead> <tbody>

还是必须在<table>里面
将表头<th>行部分划到<thead>里面
剩余部分划分到<tbody>中

<body>
    <table>
        <thead> 
            <!-- 表头部分 -->
        <tr>
            <th>头1</th>
            <th>头2</th>
            <th>头3</th>
        </tr>
        </thead>
        <tbody>
            <!-- 表体部分 -->
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>
        </tbody>>
    </table>
</body>

3.4 合并单元格补充在单元格内

跨行合并，rowspan="合并数目"，补充在最上边的单元格，向下合并
跨列合并，colspan="合并数目"，补充在最左边的单元格，向右合并

<body>
    <table width="500" height="300" border="1" cellspacing="0">
        <tr>
            <th colspan="2">头1</th>
            <!--跨列合并一个，一个顶两个-->>
            <th rowspan="2">头2</th>
            <!-- 跨行合并，原来第二行第三列的没有了 -->
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <!-- <td>23</td> -->
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
        </tr>
    </table>
</body>

在这里插入图片描述

4. HTML 列表

用来确定布局

无序列表
有序列表
自定义列表

4.1 无序列表（※）<ul> <li>

无顺序排序，先<ul>后<li>
<ul>里面只能放<li>
<li>里面可以随便放
<li>自带样式，点

<body>
    <!-- 无序列表 -->
    <ul>
        <!-- 列表中小例 -->
        <li>第一小例</li>
        <li>第二小例</li>
        <li>第三小例</li>
    </ul>
</body>

在这里插入图片描述

4.2 有序列表 <ol> <li>

有顺序排序，先<ol>后<li>
<ol>里面只能放<li>
<li>里面可以随便放
<li>自带样式，顺序符号123

4.3 自定义列表（※）<dl> 定义条目 <dt> 定义描述 <dd>

定义条目与定义描述并列
空格结构由CSS确定
<dl>只能包含<dt>与<dd>
<dt>与<dd> 可以包含所有
一般<dd> 用来描述<dt>

<body>
    <!-- 自定义列表 -->
    <dl>
        <!-- 自定义条目 -->
        <dt>自定义条目头</dt>
        <!-- 定义描述 -->
        <dd>第一小例</dd>
        <dd>第二小例</dd>
        <dd>第三小例</dd>
    </dl>
</body>

在这里插入图片描述

5. 表单

用途：收集用户信息
组成：一个表单由表单域，表单控件（表单元素）与提示信息构成

5.1 表单域 <form>

包含表单所有元素的区域
目的：收集信息提交到后台服务器
属性：

action，提交到的后台URL
mehod，传送方式， GET/POST
name，表单域名称

<body>
   <form action="提交后台服务器" method="GET" name="form1"></form>
</body>

5.2 表单元素

5.2.1 input输入表单元素 <input>

单标签
存在type属性，指定不同的类型
多选一，需要<input>相同的name属性，同时type="radio"，例如：sex。
<input>可以持有name属性
type="checkbox"，name相同的情况下，也可以多选

<body>
    <form action="提交后台服务器" method="GET" name="form1">
        文本框 <br/>
        <!-- 文本输入 -->
        用户名： <input type="text" name="username"/> <br/>
        <!-- 密码输入 -->
        密码： <input type="password" name="passwords"/><br/>
        <!-- 选择按钮radio 多选一必须有相同的name -->
        性别：男<input type="radio" name="sex" /> 女<input type="radio" name="sex" /><br />
        <!-- 复选框 可以实现多选 -->
        同意注册条款 <input type="checkbox" />
    </form>
</body>

在这里插入图片描述

5.2.2 <input>的属性name与value

多选一，需要<input>相同的name属性，同时type="radio"，例如：sex。
<input>可以持有name属性
type="checkbox"，name相同的情况下，也可以多选
value未输入情况下的默认值，只有文本框展示，主要是给后台进行默认操作的
使用name区分不同的表单

在这里插入图片描述

<body>
    <form action="提交后台服务器" method="GET" name="form1">
        文本框 <br/>
        <!-- 文本输入 -->
        用户名： <input type="text" name="username" value="请输入用户名"/> <br/>
        <!-- 密码输入 -->
        密码： <input type="password" name="passwords" value="123456"/><br/>
        <!-- 选择按钮radio 多选一必须有相同的name -->
        性别：男<input type="radio" name="sex" value="男"/> 女<input type="radio" name="sex" value="女" /><br />
        <!-- 复选框 可以实现多选 -->
        同意注册条款 <input type="checkbox" />
    </form>
</body>

5.2.3 <input>的属性checked与maxlength

checkede选项，主要为了单选按钮radio与复选框checkbox，打开时，默认选中check="checked"的选项，例如：radio加在男上面就选择男
确定最大长度，例如text的用户名最大20字符。maxlength="20"

5.2.4 <input> 提交属性submit 与重置按钮reset

type="submit"提交所有元素到后台服务器
type="reset"重置所有元素内容

5.2.5 <input> 按钮button 文件上传 file

按钮后期结合JS进行使用
文件域，上传文件用

<body>
    <form action="提交后台服务器" method="GET" name="form1">
  	<input type="button" value="获取验证码" />
  	<input type="file" />
    </form>
</body>

5.3 下拉表单元素 <select> <option>

<select> 为父标签，其字标签为<option>
在option使用select="selected"设置默认选项

<body>
    <form action="提交后台服务器" method="GET" name="form1">
        <!-- 下拉选择 -->
        <select>
            <option>北京</option>
            <option selected="selected">上海</option>
            <!-- 处于默认选择状态 -->
            <option>广东</option>
            <option>深圳</option>
        </select>
    </form>
</body>

在这里插入图片描述

5.4 文本域 <textarea>

输入大量的数据的情况使用
默认的文字通过在双标签内写出
cols与rows决定行和列的尺寸，但是通过之后CSS决定

<body>
    <form action="提交后台服务器" method="GET" name="form1">
        <textarea cols="50" rows="5">
        <!--大量文本数据-->
            这是默认的内容
        </textarea>
    </form>
</body>

在这里插入图片描述

6. 标签 <label>

用于绑定表单元素，当点击<input> 中的文本时，浏览器会自动选中对应的表单上
label的for属性，对应input的id属性

<body>
    <form action="提交后台服务器" method="GET" name="form1">
        <!-- label绑定input -->
        <label for="user"> 用户名：</label> <input type="text" name="username" id="user" /> <br/>
    </form>
</body>

由于使用了label使得用户名该文本与input进行了绑定，所以点击用户名的位置，就能够将光标跳转输入文本框
在这里插入图片描述

7. 总结

只是简单的HTML学习笔记，一天草草学完的，还没有涉及到HTML5，以后可能会进行补充。个人学习用

LTIR_752

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML简单个人学习笔记

HTML学习1. 网站与网页1.1 HTML1.2 浏览器与内核1.3 Web标准2. HTML2.1 标签关系2.2 基本结构标签（骨架标签）2.3. 一些初始化标签2.4 常用标签2.4.1 标题标签 <h1> - <h6>2.4.2 段落标签 <p> 换行标签 <br />2.5 文本格式化标签——面向文字2.5.1 加粗 <strong> <b>2.5.2 倾斜 <em> <i>2.5.
复制链接

扫一扫