前端知识学习（一）html

一、html的学习

1.1 html的基本结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

1. <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
2. <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>
3. 元素出现在文档的开头部分.其之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义
4. <title></title>定义网页标题，在浏览器标题栏显示
5. <body></body>之间的文本是可见的网页主体内容
6. <meta charset="UTF-8"> 声明编码方式用utf8
7. 标签分为自动闭合标签(如meta)和非自动闭合标签（如html）

1.2 标签的分类

块级标签（block）
- 1.独占一行
- 2可以设置长宽
- 举例如h1 -h6、p
内联标签（inline）
- 1.按内容占宽
- 2.不可以设置长宽
- 举例：img、a、b、strong、em、input
嵌套原则
- 块级便签可以嵌套内联标签，也可以嵌套块级标签（但p标签除外，不可以嵌套块级标签）
- 内联标签可以内联标签，

1.3 重要标签

标题标签(块级标签、独占一行会加粗加黑)

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

段落标签(paragraph 块级标签、独占一行有段落感上下文不会那么拥挤)

<p>大家好，我是段落1。</p>
<p>大家好，我是段落2。</p>
<p>大家好，我是段落3。</p>

换行标签（break 不是内联标签也不是块标签）

大江东去<br>
浪淘尽<br>
千古风流人物<br>

可以看出br与p上下文间隔不同
文本格式化标签
b :border

<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />

标签的嵌套(斜体粗体)

<i><b>定义粗体文本</b></i>

特殊符号

&reg # 商标
&nbsp; # 空格 Non-Breaking Space
&copy # 版权所有
&lt # 小于

1.4 img标签（内联标签但是可以设置长宽）

在HTML中，图像由标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif。

src属性：
指定图像的URL地址，是英文source的简写，表示引入资源。
src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。当图像显示错误时，在图像位置上显示alt的值。如上所示，就是谷歌浏览器中，引入图像失败后，显示了替换文本。alt属性一般作为SEO优化的手段之一，所以，使用了img标签就需要加上alt属性。
width属性：指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字

<img width="200" height="200" src="https://file.shomes.cn/minio/file/20/2022/1219/56c2f8fc-804d-4a92-b784-a919ac365130.jpg" alt="照片出错时的显示文本" title="悬浮显示的文本">

a标签里嵌套img,点击图片会跳转到相应链接

<a href="https://www.baidu.com/"><img width="200" height="200" src="https://file.shomes.cn/minio/file/20/2022/1219/56c2f8fc-804d-4a92-b784-a919ac365130.jpg" alt="照片出错时的显示文本" title="悬浮显示的文本"></a>

1.5 a标签(内联标签)

href Hypertext Reference 超文本链接

超链接是浏览者和服务器的交互的主要手段，也叫超级链接或a链接，是网页中指向一个目标的连接关系，这个目标可以是页、网页中的具体位置、图片、邮件地址、文件、应用程序等。

超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的，用户通过点击超链接可以从一个网页跳转到另一个网页。

超链接的属性：

属性	值	描述
href	超文本链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如：F:\html\index.html ]	规定链接的跳转目标
title	一些文字	链接的提示信息,所有title属性都是悬浮提示
target	_blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页]	无

<p><a href="https://www.baidu.com/" title="点击链接跳转到百度" target="_blank">百度</a></p>

如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面

1.6 列表标签（块级标签）

ul：unorder list 无序列表

ol: order list 有序列表

  有序、无序是指 前面那个序号

  <ul type="square"><li>item1</li><li>item2</li><li>item3</li></ul><ol start="100"><li>item1</li><li>item2</li><li>item3</li></ol>

1.7 talbe标签

tr: table row 表格行通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行
td: table data 表格数据通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。
th:table header cell 表头单元格文本会加黑
thead: 放th的
tbody: 放td的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>序号</th><th>姓名</th><th>年龄</th></tr></thead><tbody><tr><td>1</td><td>youfei</td><td>18</td></tr><tr><td>2</td><td>张三</td><td>28</td></tr></tbody>
</table>
</body>
</html>

写在<head>里的style可以控制table的样式也可以在table里自己写样式

    <style>table{border: 1px red;text-align: center;}table tr td{width: 100px;height: 50px;background-color: gray;}</style>

向服务器发请求的几种方式
1.浏览器的地址栏 GET
2.a标签 GET
3.form表单 GET/POST
4.ajax请求 GET/POST

1.8 form标签

前提：input 需要 name 属性组成键值对;写了value就是默认值
placeholder:灰色提示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action=""><!--    text 文本输入 单行文本  --><p> 姓名:<input name="username" type="text" placeholder="请输入姓名"></p><!--    password 密码 隐藏显示的  --><p> 密码:<input name="pwd" type="password"></p>
<!--    checkbox 复选框 默认选中 checked="checked"  --><p>爱好: 足球:<input type="checkbox" name="hobby" value="football" checked="checked">蓝球:<input type="checkbox" name="hobby" value="basketball"></p><!--    radio 单选框  默认选中 checked="checked"   --><p>性别: 男:<input type="radio" name="sex" value="male" checked="checked">女:<input type="radio" name="sex" value="female"></p><!--    date 年月日选择   --><p>生日: <input type="date" name="birth" value="1996-02-20"></p><!--onlick 点击事件与js有关--><p><input type="button" value="按钮" onclick="alert(123)"></p><!--select选择框 需要写value值 默认值 在option selected="selected"--><p><select name="province" ><option value="sichuan" >四川</option><option value="chongqing">重庆</option><option value="shanxi" selected="selected">陕西</option></select></p><!--textarea 多行文本--><p><textarea name="jianjie" id="" cols="30" rows="10" placeholder="简介"></textarea></p>
<p><input type="submit"></p>
</form>
</body>
</html>

前端知识学习（一）html相关推荐

【前端知识学习】HTML5 学习笔记
文章目录一. 简介与基本信息 1. W3C 标准 2. HTML基本结构 3. 网页基本信息 4. 网页基本标签 5. 媒体元素二. 网页结构与框架 1. 页面结构 2. iframe 内联框架 ...
前端知识学习——html
<!-- Html 在PyCharm中新建html文件默认给出的 ...
前端知识学习案例-Clipboard API一键复制和一键粘贴功能
重学前端----前端知识系统学习推荐专栏
推荐一个前端知识学习专栏.此专栏为极客时间收费专栏. 学习交流加个人qq: 1126137994 个人微信: liu1126137994 学习交流资源分享qq群: 962535112 文章目录 1 ...
零基础该如何学习Web前端知识?
想要跳槽到IT行业人在近几年越来越多,大部分都是想要学习web前端技术,但是这其中有很多都是零基础学员,大家都想知道零基础该如何学习Web前端知识?我们来看看下面的详细介绍. 零基础该如何学习Web前 ...
如何学习前端知识？优秀的前端开发工程师应该具备什么条件？
Web前端开发技术主要包括三个要素:html.css和JavaScript! 如何学习前端知识? 我们生活在一个充满规则的宇宙里面.社会秩序按照规则运行,计算机语言几乎全部是规则的集合.计算机前辈们定 ...
如何学习Web前端知识转型？
现在的互联网工作者都比较向往高薪,所以有一些运营或者设计岗也会想要转行去技术岗.今天就以设计师转型学习Web为例,一起来看看如何学习Web前端知识转型? 1.HTML/CSS学习第一阶段,你要从最基 ...
零基础学前端之SEO 基础知识学习--SEO优化学习教程【学习笔记】
[前端总路线学习笔记] 本笔记的参考视频–SEO 基础知识学习视频 SEO优化学习教程学习笔记 SEO用到的网站 1.百度指数 2.站长之家 1.什么是SEO – 搜索引擎优化 Search Engi ...
前端知识零零散散，如何高效学习？
文章目录总结一.前端需要掌握什么技能 1.1 前端基础 1.2 主流前端框架 1.3 服务端开发 1.4 前端工程化二.如何高效入门 2.1 前端技术 2.2 前端需要掌握的软件三.如何进阶学 ...

前端知识学习（一）html

一、html的学习

1.1 html的基本结构

1.2 标签的分类

1.3 重要标签

1.4 img标签（内联标签但是可以设置长宽）

1.5 a标签(内联标签)

1.6 列表标签（块级标签）

1.7 talbe标签

1.8 form标签

前端知识学习（一）html相关推荐

最新文章

热门文章

前端知识学习（一）html

一、html的学习

1.1 html的基本结构

1.2 标签的分类

1.3 重要标签

1.4 img标签（内联标签 但是可以设置长宽）

1.5 a标签(内联标签)

1.6 列表标签（块级标签）

1.7 talbe标签

1.8 form标签

前端知识学习（一）html相关推荐

最新文章

热门文章

1.4 img标签（内联标签但是可以设置长宽）