HTML基础学习笔记（二）

最新推荐文章于 2024-10-03 22:12:17 发布
最新推荐文章于 2024-10-03 22:12:17 发布
阅读量168 收藏
点赞数
分类专栏： 前端学习 文章标签： html 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51808540/article/details/128653659
版权

HTML基础（二）

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

1.1 、head头部的作用

1）title标签

放置页面的标题名称

<title>标题</title>

2）link标签

（1）放置当前站点的icon（图标）
<link rel="icon" href="#"/>
（2）引用外部css样式
<link rel="stylesheet" href="xxxx.css">

3）meta标签

（1）设置当前的编码格式

<meta charset="utf-8">
<!--
        编码格式
        1、国标（中国大陆）
        GB2312、GBK、GB18030
        2、港澳台（繁体）
        BIG5
        3、西欧编码
        ISO-8859-1 #向下兼容Ascll
        4、国际标注
        UTF-8、16、32
-->

（2)网站描述

<meta name="description" content="xxxxxx"/><!--描述网站内容-->（name可以自定义）

（3）关键字

<meta name="keyword" content="xxxx"/><!--搜索关键字-->

（4）页面自适用宽度

<meta name="viewport" content="wide=device-width,initial-scale=1,maximum-scale=1">
<!--使得网页自动适用pc端和移动端不同页面宽度-->

（5）不设置缓存

（6）浏览器兼容性

<mate http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

4）base标签

<base> 
<!--标签用于为页面中所有相对链接指定一个基本链接，当您设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>&lt;base&gt;标签演示</title>
    <base href="http://c.biancheng.net/">
</head>
<body>
    <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="html/index.html">HTML教程</a></li>
    </ul>
</body>
</html>

2、Typora

2.1、修改的地方

  • 通用
  • 图像
  • Markdown

2.2、Markdown语法

3、HTML语法

<!DOCTYPE html> <!--让W3C识别的版本-->
<html>
	<head>		
		<!-- 设置页面的标题 -->
		<title>小米商城 - Xiaomi 11 Ultra Redmi</title>
		<!-- 设置当前站点的图标 -->
		<link rel="icon" href="img/favicon.ico"	
		<!-- 设置关键词 -->
		<meta name="keywords" content="小米是世界上最大的手机生产商" />
		<meta name="description" content="小米,Redmi,Ultra..." />
		
		<!-- 设置编码格式 -->
		<meta charset="utf-8" />
	</head>
	<body>
		块级以及行级元素
	</body>
</html>

3.1、块级标签（布局）

<!--用于布局使用，不会和其他标签在同一行
即会在后面默认加一个<br>,可以通过css修改
标准文档流 HTML
浮动流 CSS
火狐浏览器中查看页面信息的快捷键 ctrl+I
-->

3.1.1、div

定义 HTML 文档中的一个分隔区块或者一个区域部分。是一个层的概念，主要的作用就是用来布局。在html5中，新增了一些语义化布局的元素。

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

html5新增布局元素：

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义内容之外的文章
aside 定义内容之外的内容（如侧边栏）
footer 定义文档或节的页脚
detalls 定义额外的细节
summary 定义detalls元素的标题

3.1.2、h标题标签

h1~h6 :文本内容加粗

3.1.3、p段落标签

行距较大

3.1.4、hr水平线标签

3.1.5、br换行标签

3.1.6 列表标签

3.1.6.1 ul无序列表

每个

  • 标签独占一行

  • 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块

    <ul>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>
    3.1.6.2 ol有序列表

    用于排序

    <ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
    3.1.6.3 dl定义列表
    • 没有顺序，每个 标签、
      标签独占一行（块元素）
    • 默认没有标记
    • 一般用于一个标题下有一个或多个列表项的情况
    <dl>
    <dt>定义的标题</dt>
    <dd>定义标题的解释内容</dd>
    <dd>定义标题的解释内容</dd>
</dl>

    3.1.7 table表格标签

    • 简单易用
    • 结构稳定
    <!--spacing:间距-->
<table width="宽度" border="边框的粗细" cellspacing="单元格间的距离" cellpadding="单元格距离内容的距离">
    <theader>
        <tr>
        <th></th><!--表头，加粗，居中-->
        </tr>
	</theader>
    
    <tbody>
    	<tr>
        <td></td>
            ...
        </tr>
    </tbody>
    
    <tfooter>
    <tr>
        <td></td>
        ...
    </tr>
    </tfooter>
</table>

    • rowspan

      自上而下行合并 被合并的单元格要删除

    • colspan

      自左到右列合并

    • border

      边框属性

    • cellpadding

      内间距

    • cellseption

      单元格的间距 

    <table border="1">
    <tr>
        <!--跨列-->
        <td colspan="3">学生成绩</td>				
    </tr>			
    <tr>
        <!--跨行-->
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>95</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>88</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>59</td>
    </tr>
</table>
    学生成绩
    张三语文98
    数学95
    李四语文88
    数学59
    ### 3.1.8、媒体（HTML5新增）
    3.1.8.1、audio
    <audio controls="controls" src="#"></audio>
autoplay 自动播放
loop 循环播放
controls 控制播放

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vN29cDK3-1673485627252)(…/…/…/学习/Tyoora学习笔记/assets/image-20211221162514013.png)]

    3.1.8.2、video
    <video src="#" loop="loop"></video>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qqx15dS2-1673485627254)(…/…/…/学习/Tyoora学习笔记/assets/image-20211221162605151.png)]

    3.1.9、from表单

    3.1.9.1、input
    3.1.9.1.1 type属性
    • text
    文本输入框(Text Fields)
    • password
    密码输入框
    • checkbox
    复选框组(Checkboxes)；多个复选款一起使用；同一组的name值相同
<!--checked:默认选中-->
    • redio
    单选框组(Radio Buttons)；type为redio时，必须有一个value的值
    • file
    文件域
表单编码属性 enctype="multipart/form-data"
<!--1、当我们上传的含有非文本内容，即含有文件（txt、MP3等）的时候，需要将form的enctype设置为multipart/form-data。
2、将表单中的数据变成二进制数据进行上传，所以这时候这时如果用request是无法直接获取到相应表单的值的-->
    • submit
    <input type="submit" value="Submit" value="提交"/ >	
<!--提交表单-->
    • reset
    <input type="reset" name="button" value="重置"/>
<!--重置表单的内容-->
    • number
    数字框
<input type="number" max="10" min="7"/>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d2XuTfdq-1673485627255)(assets/image-20211222203647955.png)]

    • search
    <input type="search" src="#" />

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8aucDrxu-1673485627258)(assets/image-20211222203840988.png)]

    • date
    <input type="date"/>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hN0UyiHR-1673485627259)(assets/image-20211222205015865.png)]

    • 隐藏域 hidden
    • email
    <input type="email"/>
    3.1.9.2、select>option 下拉选框
    <select name="text">
    <option value="1">你好</option>
    <option value="2">我好</option>
    <option value="3">他好</option>
    <option value="4">她好</option>
</select>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k93qiR5T-1673485627261)(assets/image-20211222204723732.png)]

    3.1.9.3、disable 不能点按钮
    3.1.9.4、readonly 只读文本框内容
    3.1.9.5、required 必填项
    3.1.9.6、Label
    <label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K5D2Ie9v-1673485627264)(assets/image-20211222210542325.png)]

    3.1.10、textarea

    多行文本框，可以设置长宽

    3.2、行级标签（展示）

    3.2.1、img

    图片标签，能够在页面中显示图片的内容

    <img src="图片地址" title="鼠标滑过时显示的内容" alt="图片未加载时显示的内容" width="图片的宽度" heigh="图片的高度"/>
<!--
  	绝对路径：找的是一个真正存在的物理地址
	相对路径：当前页面和要找的页面的相对位置
-->

    3.3.2、a

    1. targer属性=“打开窗口位置”

    _self 本身的窗口打开

    <a href="#" targer="_self"></a>
<!--默认情况是_self-->

    _blank新的窗口打开

    <a href="#" targer="_blank"></a>
<!--打开一个新的窗口-->

    2、不设置href属性与普通文本无疑

    • 页面间链接

      代表站外链接或站内链接

      站外链接：
<a href="http://mi.com">mi</a>
站内链接：
<a href="页面名称.html">跳转页面</a>

    • ​ 锚链接

      在一个页面或者是两个页面中，要跳转到某个固定位置，被称位锚链接

      定义锚点：
<a name="锚点名称">设立锚点</a>
搜索锚点：
<a href="#锚点名称">定位锚点</a>
跨页：
页面链接+#号+锚点名称 <!--#代表当前页面-->

    • 功能性链接（使用较少）

      应用链接打开第三方软件

    <a href="mailto:zhangsan@163.com">联系站长</a><!--会打开email-->

    3.3.3、span

    小范围标签，常与div连用

    <span style="内联样式css"></span>

    em b

    3.2、预留字符

    &nbsp; 空格
&gt; 大于
&lt;小于
&quot;引号
&copy;版权符号
憨憨爱学习zz
关注
专栏目录
typora 编辑器基本用法
mkjc_hj的专栏
10-04 1916
typora 编辑器基本用法。格式为[^角标名]: 对角标文字的说明（注意：冒号是半角，在冒号前面没有空格，后面有空格）。但是，大多数 markdown 解析器将忽略单行中断，要使其他 markdown 解析器识别您的换行符，可以在行尾留下两个空格，或者插入在常规括号内，输入URL地址，以及可选的用引号括起来的链接标题。在对应的文字前面加 - [] ,显示为任务没有完成，在[]中填入x，即[x] 显示为任务完成。在空行输入[TOC]后回车，会将所有文章中的标题汇聚成目录，并且能够动态更新。
Typora代码显示行号【已解决】
qq_40651609的博客
03-03 9670
文件-》偏好设置
Typora 快捷键大全
拱卒的博客
08-10 1406
文章目录 一、格式类二、样式类三、操作类四、其他1、markdown常用的转义字符2、常用enjoy表情单词3、画图 一、格式类 序号类型快捷键/写法1大小ctrl+数字1-6或(1-6个)#+空格2加粗ctrl+b3倾斜ctrl+i4下划线ct...
Typora入门
baidu_38634017的博客
11-24 1850
目录 简介 Markdown介绍 常用快捷键 块元素 换行符 标题级别 引用文字 无序列表 有序列表 任务列表 代码块 数学表达式 插入表格 ...
Typora使用
zev的博客
06-25 2161
文章目录一、开始1、目录2、文章标题3、换行4、快捷键二、字体1、加粗2、斜体3、斜体加粗4、删除5、上下标6、高亮7、下划线8、注释9、行内代码三、格式1、分隔2、引用3、列表无序列表有序列表TODO列表4、脚注5、锚点6、表情四、插入1、链接2、图片3、表格4、代码块5、Latex公式行内式公式块语法6、UML图（未完）流程图时序图 一、开始 1、目录 [toc]，在段落中插入目录（大小写无关） 2、文章标题 # 一级标题，# 与标题间加空格 ## 二级标题，最多六级，快捷键^+（增大）、^-(减小)
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
html标签基础学习笔记
05-24
html标签基础学习笔记
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
基于Python语言的全面Python基础学习笔记设计源码
10-03
本项目为全面Python基础学习笔记设计源码，包含149个文件，涵盖36个Python脚本、17个Markdown笔记、17个PNG插图、15个HTML页面、12个XML配置文件、6个TrueType字体文件、6个JavaScript脚本、6个CSS样式表、5个GIF...
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
java学习笔记markdown
03-12
通过学习这份Markdown版的Java学习笔记，不仅可以掌握Java编程的基础，还能了解到一些高级话题，为成为熟练的Java开发者打下坚实基础。同时，Markdown格式使得笔记易于编辑和分享，是个人学习和团队协作的理想选择。
Typora使用说明(进阶版)
CS@zeny的博客
11-28 2762
Markdown For Typora 用Tpyora编辑器编写的Markdown文本，不同编辑器之间的语法还是有些差别的，但是学会用Typora去编写Markdown文档后，再用其他编辑器编写也会很容易上手操作的。
TyPora更换文字颜色和换行
Lyndon0_0的博客
09-04 1282
文字颜色 <span style='color:red'>红色</span> <span style='color:blue'>蓝色</span> <span style='color:green'>绿色</span> 换行 第一行<br>第二行<br>第三行 <br> 第一行<br/>第二行<br/>第三行 ...
Typora用法教程小结
夜飘凌的博客
05-05 1924
Typora教程 文章目录Typora教程1 Typora简介2 Markdown介绍3 Typora常用快捷键Typora快捷键整合换行符引用文字无序列表有序列表任务列表代码块数学表达式插入表格脚注分割线目录（TOC）跨度元素链接内部链接参考链接网址图片斜体加粗加粗斜体代码标记删除线下划线表情符号下标上标高亮文本居中换行符转义HTML 1 Typora简介 Typora是一款轻便简洁的Mark...
基于HTML、CSS和JavaScript的滚动数字显示效果，类似于老式计数器或电子表上的数字滚动效果
2201_76060199的博客
09-29 1114
这段代码创建了一个数字滚动显示效果，用户可以通过输入框输入金额，或点击按钮生成随机数字，金额数字会以滚动的方式显示。CSS负责布局和样式，JavaScript负责动画效果和逻辑处理。代码中多次使用了相同的IDcounter，这在实际开发中是不推荐的，ID应该是唯一的，这里可能是为了简化示例而重复使用。
使用html写一个能发起请求的登录界面
最新发布
2301_79431343的博客
10-03 474
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
HTML粉色烟花秀
兔子王
09-21 8338
HTML语言实现的粉红色跨年烟花秀的完整代码。
前端编程艺术（1）---HTML
lys20221113242的博客
09-30 991
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。：主体元素，包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。：头部元素，包含元信息，如字符集、页面标题、样式表链接、脚本链接等。标签：HTML标签用于标记文本，以便浏览器知道如何渲染它们。属性：提供关于元素的额外信息，通常在开始标签中规定。：根元素，包裹所有其他HTML元素。
【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论
mengran_code的博客
09-29 658
简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值