01-01HTML

最新推荐文章于 2024-07-24 17:16:26 发布

梓源先生

最新推荐文章于 2024-07-24 17:16:26 发布

阅读量386

点赞数

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

本文链接：https://blog.csdn.net/nie13739606256/article/details/126998402

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML 是什么：即 HyperText Markup language 超文本标记语言，咱们熟知的网页就是用它编写的，HTML 的作用是定义网页的内容和结构。

HyperText 是指用超链接的方式组织网页，把网页联系起来
Markup 是指用 <标签> 的方式赋予内容不同的功能和含义

CSS 是什么：即 Cascading Style Sheets 级联（层叠）样式表，它描述了网页的表现与展示效果

JS脚本: javascript,页面元素的交互

1. HTML 页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <p id="p1">Hello, world!</p>
    <img src="1.png">
  </body>
</html>

html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素
head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等
body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素

2. HTML 元素

HTML 由一系列元素 elements 组成，例如

<p>Hello, world!</p>

整体称之为元素
<p> 和 </p> 分别称为起始和结束标签
标签包围起来的 Hello, world 称之为内容
p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落

元素还可以有属性，如

<p id="p1">Hello, world!</p>

属性一般是预先定义好的，这里的 id 属性是给元素一个唯一的标识

元素之间可以嵌套，如

<p>HTML 是一门非常<b>强大</b>的语言</p>

错误嵌套写法：

<p>HTML 是一门非常<b>强大的语言</p></b>

不包含内容的元素称之为空元素，如

<img src="1.png">
<img src="1.png"/>

img 作用是用来展示图片
src 属性用来指明图片路径

3.标签属性

标签的属性分为:通用属性, 预置属性, 事件属性, 自定义属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的属性</title>
</head>
<body>
    <!-- <script>
        alert(1)
    </script> -->

    <!-- <style>
        :root {
            background-color: yellow;
        }
    </style> -->


    <!-- 1. 通用属性: 几乎所有元素都拥有-->
    <!-- id, class, style  -->
    <!-- id: 用于表示页面中的唯一元素, 唯一性自己保证 -->
    <!-- <style>
        #active {
            background-color:red;
        }
    </style>
    <div id="active">hello</div>
    <div id="active">world</div> -->
    <!-- class: 是推荐使用的, 以后咱们几乎只用它, 用于表示一类元素 -->
    <!-- css: 样式复用， class天生就具备了样式复用的特征 -->
    <style>
        .active {
            background-color:green;
        }
    </style>
    <div class="active">hello</div>
    <!-- style: 可自定义某一个元素的样式，权重大于外部样式 -->
    <div class="active" style="background-color: red;">world</div>

    <!-- id: 唯一元素
    class: 同类元素
    style: 自定义某个元素样式 -->
     

    <!-- 2. 预置属性: 是通用属性的一个子集 -->
    <!-- id, class, style也是预置的属性，只不过几乎所有元素都会有 -->
        <a href="www.baidu.com" id="" class="" style="">百度</a>
        <img src="" alt="这是一张图片我也不知是啥" id="" class="" style="">


    <!-- 3. 事件属性 -->
    <!-- 有一个通用前缀: on+事件名称: 事件属性 -->
    <button onclick="alert('提交成功')">提交</button>

    <!-- 4. 自定义属性 , 有一个通用前缀: "data-"-->
    <!-- v-model , v-for, v-bind, 都是自定义属性 -->
    <div data-user-email="1111111@qq.com">我的邮箱是:</div>
    <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.userEmail">获取邮箱</button>
    <p></p>

    <!-- 通用属性, 预置属性, 事件属性, 自定义属性 -->
</body>
</html>

4.常见元素

1) 文本

Heading

<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>

Paragraph

<p>段落</p>

List

无序列表 unordered list

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

多级列表

<ul>
    <li>
    	北京市
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
            <li>昌平区</li>
        </ul>
    </li>
    <li>
    	河北省
        <ul>
            <li>石家庄</li>
            <li>保定</li>
        </ul>
    </li>
</ul>

Anchor

锚，超链接

<a href="网页地址">超链接文本</a>

2) 多媒体

Image

<img src="文件路径">

src 格式有 3 种

文件地址
data URL，格式如下
```
data:媒体类型;base64,数据
```
object URL，需要配合 javascript 使用

Video

<video src="文件路径"></video>

Audio

<audio src="文件路径"></audio>

3) 表单

作用与语法

表单的作用：收集用户填入的数据，并将这些数据提交给服务器

表单的语法

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    <input type="submit" value="提交按钮">
</form>

method 请求方式有
- get （默认）提交时，数据跟在 URL 地址之后
- post 提交时，数据在请求体内
enctype 在 post 请求时，指定请求体的数据格式
- application/x-www-form-urlencoded（默认）
- multipart/form-data
其中表单项提供多种收集数据的方式
- 有 name 属性的表单项数据，才会被发送给服务器

常见的表单项

文本框

<input type="text" name="uesrname">

密码框

<input type="password" name="password">

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday">

单选

<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

多选

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

文件上传

<input type="file" name="avatar">

5.emmet语法

在vscode中有快速生成代码的语法,采用的就是emmet语法
1 html:5 或 ! : 创建 html文档结构

2 id, class

#->id, . -> class
#->id{id1}, . -> class{class1}

3 层级: 父子, 兄弟

ul>li>a{xxxx}

兄弟 : +

.title{站点名称}+.url{百度}

4序号

 ul.menu>li.item*4>a{item}
  ul.menu>li.item*4>a{item$}    --$默认从1开始递增,升序
   ul.menu>li.item*4>a{item@}		--@: 指定起始索引

快速创建一个5行8列的表格

table>caption{信息表}+(thead>tr>th{title}*8)+(tbody>tr*5>td{item}*8)

6.语义化标签

html5之后增加了语义化布局元素,产生语义化标签的原因是,很多页面的布局,程序员会默认把该模块的属性值设置成一样的名称,所以诞生了语义化元素
比如

    <div id="header">header</div>
    <div id="main">main</div>
    <div id="footer">footer</div>

html5: 语义化布局元素

    <header>header</header>
    <main>main</main>
    <footer>footer</footer>

出现语义化标签后,还是有大量的开发都, 喜欢用 div + class 模式, 不用语义化布局标签,这是因为什么?

目前项目90%以上是基于移动端的, 不在乎, 不依赖搜索引擎优化,seo
语义化标签还是数量太少了, 不如用class来描述更精准

其他

注意:html是一个结构化的文本, 所以引入的外部元素, 必须使用标签进行包装

所以html文档: 是由上到下顺序解析 ,写css的style标签,对位置不敏感,写js的script标签,如果涉及到html-dom元素操作,则对位置非常敏感,所以一般在html文档节点加载完之后在加载js的代码,否定会出异常

梓源先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
01-01HTML

html介绍
复制链接

扫一扫

专栏目录