【无标题】

最新推荐文章于 2024-11-14 15:33:48 发布

啊麗酱

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量1k

点赞数

分类专栏： web前端文章标签：前端 html5 html

本文链接：https://blog.csdn.net/qq_29145465/article/details/128247709

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Day1 HTML入门

1.基础认知

1.1 web标准

为什么需要web标准

不同的浏览器的内核（渲染引擎）不同，对于相同的代码解析出来的效果存在差异，遵循web标准，可以使得相同的代码在不同的浏览器上解析展示的效果统一

web标准的构成

HTML：页面结构/元素
CSS：页面样式
JavaScript：交互功能

1.2 vscode快捷键

用vscode写代码，用Chrome浏览器打开显示渲染效果

快速生成

! + tab 快速生成html骨架；标签名快速生成标签
{} 填充标签中的文本；[] 输入标签属性
使用 > 嵌套标签；使用 + 并列标签；使用 * 生成多个标签
自增符号$ (一个 $, 从 0 - 9 ，两个$ ,即$$，从01-99，以此类推)

注释

直接ctrl+/ 对该行注释或取消注释
选中多行ctrl+/ 多行注释

批量修改

框选某些内容，ctrl + d 会自动加选下一个与之相同的内容，于是可以做到批量修改

随机文本的输入

lorem 默认生成30个单词组成的一段随机文本

lorem10： 10个，1段

lorem*5： 30个，5段

路径

**./同级目录下；…/**上级目录下

移动

可直接复制所有内容到vscode，然后选中某些内容拖拽到某个位置

2.HTML标签

hyper text markup language超文本标记语言

标签名与属性之间，属性与属性之间以空格隔开，属性之间没有顺序之分。

<!--HTML骨架-->
<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

2.1 排版标签

标题标签

h1~h6 ，语义：1~6级标题，重要程度依次递减

<!--快捷键： h${$级标题}*6  -->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

段落标签

p ，语义：段落

换行标签

br 单标签，语义：换行

水平线标签

hr 单标签，语义：分割不同主题的内容

2.2 文本格式化标签

strong 加粗；ins 下划线；em 倾斜；del 删除线；

语义：突出重要性，起强调作用

2.3 媒体标签

图片标签

<!--img 单标签-->
<img src="图片的路径" alt="替换文本" title="提示文本"
     width="宽度值" height="高度值">

alt : 图片加载失败时，显示alt设置的替换文本
title : 鼠标悬停在图片上时，显示的文本（title属性是公共属性，也可以用于其它标签，效果相同，都是悬停时展示提示文本）
width / height : 属性值为数值，单位可以省略（默认就是px），若二者中只设置一个，那么会进行等比例缩放；若二者都进行设置，若设置大小不恰当，则会导致图片变形

音视频标签

<!--
audio 支持格式：mp3/wav/ogg
video 支持格式：mp4/webm/ogg
-->
<audio src="音频路径" controls autoplay loop></audio>
<video src="音频路径" controls autoplay loop muted></video>

controls : 显示播放控件
autoplay : 自动播放（部分浏览器不支持）（在video标签中，大多数浏览器支撑autoplay 和 muted同时作用的效果：静音自动播放）
loop : 循环播放

2.4 链接标签

<a href="跳转地址" target="跳转方式">点击跳转</a>

target
- 默认为 _self，在当前窗口打开
- _blank，在新窗口打开

空链接

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

特点：

点击空链接可回到网页顶部
不确定链接最终跳转位置时，使用空链接占位

2.5 列表标签

无序列表

<!--ul标签中只允许包含li标签，li标签中可以包含任何内容-->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

有序列表

<!--ol标签中只允许包含li标签，li标签中可以包含任何内容-->
<ol>
    <li>首先</li>
    <li>其次</li>
    <li>最后</li>
</ol>

自定义列表

<!-- dl 自定义标签的整体；dt 自定义列表的主题；dd 针对主题的每一项内容
dl 标签只允许包含dt/dd标签，而dt/dd标签中可以包含任何内容
-->
<dl>
	<dt>服装</dt>
    <dd>女装</dd>
    <dd>男装</dd>
    <dd>童装</dd>
    <dt>箱包</dt>
    <dd>行李箱</dd>
    <dd>单肩包</dd>
    <dd>双肩包</dd>
</dl>

2.6 表格标签

基本标签

table 表格整体,包裹tr

tr 表格每行，包裹td

td 表格单元格，包裹内容

其它标签

caption 表格大标题

th 表头单元格

结构标签：

thead 表格头部
tbody 表格主题
tfoot 表格底部

嵌套关系

table>tr>td

caption标签写在table内部

th标签写在tr内部（替换td标签，更好的语义化）

结构标签thead tbody tfoot包裹tr标签，使用结构标签可以使得表格结构更清晰

表格属性

border设置边框宽度（默认为0无边框）

width/height 分别用于设置表格的宽度和高度（不设置时，默认和文字贴合）

<table border="2">
    <caption>学生成绩单</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>89</td>
            <td>厉害！很大的进步！</td>
        </tr>
        <tr>
            <td>小蓝</td>
            <td>99</td>
            <td>太棒了！保持优秀下去哦~</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>100</td>
            <td>佩服！第一名！</td>
        </tr>
    </tbody>
    <tfoot>
    	<td>整体情况</td>
        <td>均分95+</td>
        <td>同学们的学习态度都很积极！</td>
    </tfoot>
</table>

合并单元格

跨行合并（垂直方向合并）

属性名 rowspan
属性值：合并后单元格的总数

跨列合并（水平方向合并）

属性名 colspan
属性值：合并后单元格的总数

左上原则

左右合并，只保留最左边的；上下合并，只保留最上面的

<table border="2">
    <caption>心愿单</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>生日</th>
            <th>想要收到的礼物</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小蓝</td>
            <td>9月19日</td>
            <td rowspan="2">iPhone 13 Pro</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>8月12日</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>小白</td>
            <td>6月16日</td>
            <td>一架雅马哈钢琴</td>
        </tr>
    </tfoot>
</table>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jpkXzDaa-1670550224303)(C:\Users\joypl\AppData\Roaming\Typora\typora-user-images\image-20221201120733385.png)]$

2.7 表单标签

input系列

input 是单标签，通过设置type属性，赋予不同功能：

type=“text” 文本框
type=“password” 密码框
type=“radio” 单选框
type=“checkbox” 复选框
type=“date” 日期选择
type=“file” 文件选择
type=“submit” 提交按钮
type=“reset” 重置按钮
type=“button” 普通按钮

<!-- 文本框和密码框
type默认为text，如果写错了或没写，都会以文本框效果显示
placeholder 没有输入内容时展示的灰色的提示信息
-->
姓名：<input type="text" placeholder="提示文本">
密码：<input type="password" placeholder="提示文本">

<!-- 单选框
name 用于分组，使得单选效果生效：一组中只能有一个被选中
checked 默认选中，一组中只能设置一个
-->
性别：<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女

<!-- 复选框
checked 可以设置多个
-->
爱好：<input type="checkbox" checked>滑雪
<input type="checkbox" checked>唱歌
<input type="checkbox">跳舞
<input type="checkbox">爬山

<!-- 日期选择框和文件选择框
multiple 多文件选择
-->
<input type="date">

<input type="file">
<input type="file" multiple>

<!-- 提交/重置/普通按钮
要实现按钮submit/reset/button功能，需要配合form标签：使用**form**标签把**所有**表单标签一起包裹起来
value 设置普通按钮上的文字，普通按钮默认无功能
-->
<input type="submit">
<input type="reset">
<input type="button" value="一个普通按钮">

button

button的type属性值（submit/reset/button）同input之按钮系列，不过相比input之按钮更灵活（button标签包裹的内容就是按钮名；button标签是双标签，可以包裹其它内容：文字图片都可以）

也需要使用form包裹起需要作用的所有标签

<form>
    爱好：<input type="checkbox" checked>登山
    <input type="checkbox">滑雪
    <input type="checkbox">蹦极
    
    <button type="reset">重置</button>
</form>

select

select 下拉标签的整体；option 下拉菜单的每一项

selected 下拉菜单的默认选中

所在城市：<select>
    		<option selected>北京</option>
        	<option>上海</option>
        	<option>广州</option>
        	<option>深圳</option>
		</select>

textarea

<textarea cols="80" rows="50"></textarea>

label

方法1：for属性值对应id属性值，可以达到：点击文字也能选中的效果

性别：<input type="radio" name="sex" checked id="man"><label for="man">男</label>

<input type="radio" name="sex" id="woman"><label for="woman">女</label>

方法2：直接使用label标签将每个表单标签单独包裹起来即可

性别：
<label>
	<input type="radio" name="sex" checked>男
</label>
<label>
	<input type="radio" name="sex">女
</label>

2.8 语义化标签

没有语义的布局标签

div标签：独占一行

span标签：不换行

有语义的布局标签

在html5中，更加重视语义化，推出了一些有语义的布局标签供开发者使用

header 头部；nav 导航栏；footer底部；aside 侧边栏；section 区块；article 文章

2.9 字符实体

作用：用于在网页中显示特殊符号

HTML中的空格合并现象：多个空格或换行最终展示效果只有一个空格

<!--常用的字符实体
小于号 &lt;
大于号 &gt;
空格 &nbsp;
-->

啊麗酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录