html基础
自学笔记
声明是html5文档
<!DOCTYPE html>
头部元素：
<head>
<meta charset = "utf-8"
<title>名称</title>
</head>
可见内容的页面显示:
<body>
<h1> </h1>
<p> </p>
</body>
</html>
什么是html？
超文本标记语言
不是一种编程语言，是一种标记语言
HTML 标记标签通常被称为 HTML 标签
html标签是由尖括号包围的关键词
通常成对出现
第一个是开始标签，第二个是结束标签开始标签和结束标签又叫开放标签或者闭合标签
doctype 声明是不区分大小写的
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK
HTML 标题是通过标签来定义的。
<h1> - <h6>
HTML 段落是通过标签来定义的。
<p>
HTML 链接是通过标签来定义的。
<a>
<a href="https://www.runoob.com">这是一个链接</a>
html图像
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
这个路径是相对的，在本机上的路径，不是网络路径
<br>换行建议用
</br>
因为html是闭合性的，不会出现错误
html属性
html元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称、指的形式出现比如name="value"
- 属性和属性值，尽量小写，本来这样做也方便些。
- class 属性可以多用 class=" " （引号里面可以填入多个class属性）
- id 属性只能单独设置 id=" "（只能填写一个，多个无效）
标签在 HTML 页面中创建水平线。
<!-- 这是一个注释 -->
注释的方法
浏览器会自动地在段落的前后添加空行。
</p> 是块级元素
浏览器忽略了源代码中的排版（省略了多余的空格和换行）
<b>是粗体
<strong>是加粗
<big>是加大
<i>是斜体
<em>也是斜体
<small>是缩小
<sub>是下标
<sup>是上标
利用pre可以实现对文本的预想编辑
对元素的缩略词可以用标签
<abbr title="">显示文字.</abbr>
也可以用
<acronym title="">显示文字.</acronym>
<bdo dir="rtl">该段落文字从右到左显示。</bdo>
块引用
<q>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
WWF's goal is to: "Build a future where people live in harmony with nature. "We hope they succeed.
删除插入特效
<del>
<ins>
html链接语法
<a href="url">链接文本</a>
关于target属性
如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。
<a href="chenyouxiu.com" target="_blank">陈优秀!</a>
会跳转新的一个页面，如果不想跳转，就去掉target
通过id来定位内容
例子：
<p>
<a href="#C4">查看章节 4</a>
</p>
<h2><a id="C4">章节 4</a></h2>
就是通过在标题上来对href进行本地连接快速到达，然后在文章中设置id等于自己想要的即可快速到达。id也可以通过name来定义，都可以
单词之间空格使用 %20 代替，以确保浏览器可以正常显示文本
<meta> 一般放置于 <head> 区域
html样式实例
style的font-family字体设置 color颜色设置font-size字体大小设置属性来定义字体的样式
不是使用标签
<font>
文本对齐方式
text-align文字对齐属性指文本的水平与垂直对齐方式
不建议使用的标签有
<font>, <center>, <strike>
不建议使用的属性: color 和 bgcolor.
alt 属性用来为图像定义一串预备的可替换的文本
对于默认文字图像对其是文字在图像底部的
如果要设置，可以使用align，但是html4就废弃了，5不支持该属性，可以用css来
<h4>图片的使用</h4>
<p>
这是一些文文本，插入这个<img src="smile.gif" alt="face you everyday" align="middle" width="32" height="32" 看看文字在图片哪里
</p>
浮动图片使用style="float:left/right"来进行
CSS float 属性，在HTML 4 中 float 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替
创建图像映射
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）
听课笔记
可以在前body里加background="相对路径"或者bgcolor="#数字"来设置背景颜色
<a>可以表示
<a>
这个<是左括号>是右括号
<p>也是换行的一种形式
pre原格式进行输出
ul进行无序排序
ol进行有序排序
无论有序无绪都要有<li>
font字体标签
可以设置文当的字体，通过改变其属性，对文本进行设置。字体大小颜色等改变
size
face
color
链接到email
<a href="mailto:emailaddress邮箱地址">邮箱链接</a>
表格标签<table>
<tr><td> 文字信息 </td>
</tr>
这是一行一列，也可以再加td进行增加行
如果想设置表格那样显示，就使用
<table border=1px>
说明标签
<caption></caption>
主要是对表格的说明的，在表格上方
表单form是html的一个重要部分，主要用于采集和提交用户输入的信息，使用网页具有交互功能。
表单标签
<form></form>
用来创建表单，在标签对之间的都属于表单的内容，三个常用的属性
action
method
target
通过更改text来查看密文，同样也可以提交来查看get参数，也可以使用把html文件放在phpstudy中
浙公网安备 33010602011771号