<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
表示文档的编码格式为utf-8 <title> 这里面写的是网页的名称（网页标签） </title>HTML 标题
通过
标签来定义
HTML段落 通过标签
来定义
HTML链接通过标签来定义
test
<title>test1</title>hello world
我是一个段落
bing
<title>馨美公司装修介绍</title>公司介绍
人民对美好生活的向往，是我们奋斗的目标，在这里，创业的氛围让我们每个人都积极创新，为作出美好的事情而努力。
其中标题元素h2
水平线元素hr
段落元素p
css样式
style 样式 font-size 字体大小 text-align 对齐方式
<title>HTML 5 保留的文本格式元素示例</title>粗体文本大号文本更大号字体粗更大号字体
倾斜文本小号字体更小号字体倾斜小号字体
打字机或者等宽的文本这段包含上标还包括下标
HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)
加粗
大号字体
倾斜
下标
上标
斜体表示引用
hello
hello
元信息元素
用于描述文件自身信息的一类元素，meta元素定义原信息，包含页面的描述、关键字、最后的修改信息等
标签写在----标签中
meta元素常用属性
- charset:定义文件的字符编码，常用的是utf-8
- content:定义与name和http-equrv相关的原信息
- name:关联content的名称常用的有keyword关键字、author作者名description页面描述
语义元素
语义元素是指清楚的向浏览器和开发者描述其意义的元素
有100多个HTML语义元素可分为
- 块级元素
- 行内（内联）元素
- 行内块元素
- 。。。。。
块级元素 block
display:block元素
1、独占一行
2、直接控制宽度（width）高度（height） 盒子模型的相关CSS属性，内边距（padding）外边距（margin）等都可控制
3、在不设置宽度的情况下 块级的元素是其父级元素的内容宽度
4、在不设置高度的情况下块级元素的高度是其本身内容的高度
行内元素 inline
display:line元素
元素
是换行元素
注释
特殊符号
采用&xxx;方式代表一个符号
实体符号
HTML特殊符号（字符实体)大全_html特殊符号代码_折耳鼠的博客-CSDN博客
123 123 0
输入连续空格浏览器只识别一个空格，若要多个空格则使用多个
超链接元素
<iframe src="//player.bilibili.com/player.html?aid=363373637&bvid=BV1t94y1W7TP&cid=1262251633&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>img元素
abc
src
zzzzzz 《执行JavaScript函数》
列表元素
无序列表 ul
324242424
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
11111
- 0000
自动缩进
有序列表 ol li
000000
- 11
- 22
- 33
- 44
- 55
--------
- 000000
- 099990
- 00222
自动添加序号
定义列表 dt dd
- title one
- i am a title one
- title 2
- i am a title 2
- title 3
- i am a title 3
嵌套列表同理
iframe 框架元素
<iframe src = "http://www.bing.com" name = "bilibili" width = "1024" height="512"></iframe>
bilibili
<iframe name = "mainFrame" width = "800" height = "800"></iframe>
可以在网页中插入其他的网页
属性
- src:引用的页面地址
- name设置框架的标识
- width:设置框架的宽度
- height:设置框架的高度
部分网页可以进行内联部分网站限制不可
分区元素 div
hello
title
范围元素span
span标签是HTML中的一种内联元素，通常用于组合文档中的一小部分内容，并且不会导致文本换行。
HTML 文档结构布局
- header: 页眉
- nav:导航
- article:文档页面应用程序网站中的一体化内容
- section:文档的一段一节
- aside:页面内容有关有别于主要内容
- footer:页脚
- hgroup：代表段或者节的标题
- time:代表时间
- mark：文档中需突出显示的文字
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello jy</title>
</head>
<body>
<header><h1>我是header 页眉</h1></header>
<nav>我是nav 导航栏
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">副页</a></li>
<li><a href="http://www.baidu.com">baidu</a></li>
</ul>
<form>
<input type="search" name="se" placeholder="要搜索的内容">
<input type="submit" name="tj" value="search">
</form>
</nav>
<main>
<text style="color: aquamarine;">我是文本</text>
<H3>我是king</H3>
<aside>我是aside 侧边栏
<h2>url</h2>
</aside>
</main>
<footer>
我是footer 页脚
<p>© 2050 某某保留所有权利</p>
</footer>
</body>
</html>
学习css样式的时候再进一步
HTML 交互元素
<details>
<summary>hello</summary><!-- 指定标题 -->
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</details>
HTML progress元素
- value 已经完成的工作量
- max 总共有多少工作量
value和max的值都必须大于0
val 的值必须小于max
HTML 表格
Caption biaoti 行为tr列为td 加粗为td
First Secand Third 00 01 09 03 04 10
cellpadding和cellspacing是HTML表格中使用的属性，用于控制表格单元格的样式和布局。
cellpadding是指单元格边框到内容之间的距离（留白），通常以像素为单位进行设置。例如，如果您设置cellpadding为10像素，那么单元格边框与内容之间的空白距离为10像素。
而cellspacing是指单元格之间的空白量，也就是表格中各个单元格之间的距离，同样通常以像素为单位进行设置。通过调整cellspacing可以改变表格中单元格之间的间距，从而影响整个表格的外观和布局。
需要注意的是，HTML规范中已经不建议使用cellspacing和cellpadding属性，因为它们已经被CSS样式所取代。在现代的网页开发中，建议使用CSS来设置表格的样式和布局，包括单元格间距和填充等。
不规范表格
colspan用于表格的跨行 横着跨 colspan = 2
rowspan用于表格的跨列 竖着跨 rowspan = 2 竖着跨
- thead
- tbody
- tfooter
出现一个必须全部出现
<table border="2" cellspacing = "60 " cellpadding = "20" style="background-color: black;"><!-- border="2" --> <caption>Caption biaoti 行为tr列为td 加粗为td</caption> <thead style="background-color: aqua;"> <tr><th>First</th><th> Secand</th><th> Third</th></tr> </thead> <tbody style="background: #F300f0;"> <tr><td>00</td><td>01</td><td>09</td></tr> <tr><td>03</td><td>04</td><td>10</td></tr> </tbody> <tfoot style="background: #00FF00;"> <tr><td colspan="3" style="text-align: center;">end</td></tr> </tfoot> </table>
<colgroup>
<col width = "100" style="background: #F38090;">
<col width = "500" style="background: #5500ff;">
<col width ="300" style="background: #ffaaff;" >
</colgroup>
<!-- 使用colgrop 和 col进行格式化 -->
表单元素 Form
**
**使用方法
- name属性：表单的名字，在一个网页中唯一识别一个表单，和id属性相同 该属性必有
- method 属性：规定用于发送表单数据时的发送模型，其属性是get或post 该属性必有
- action属性：规定在提交表单数据时向何处发送表单数据 网址或者email该属性必有
输入元素input
元素用来定义用户数据输入字段
123
<iframe src = "https://www.runoob.com/tags/att-input-type.html" widht = "200" height = "600"> </iframe>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello jy</title> <!-- <img src="C:\Users\14130\Desktop\HTML5\第一章源代码.assets/5.png"> --> </head> <body> <h3>login</h3> <br><hr> <p> <form action="" method=""> <Table> <tr><td>账号 <input type="text" value="" name="uid" size="12" maxlength="12"></td></tr> <tr><td>密码<input type="password" value="" name="password" size="12" maxlength="12"></td></tr> <tr><td><p>性别:<input type="radio" value="male" name="sex" checked = "checked"><b>male</b> <input type="radio" value="female" name = "sex"><b>female</b></p></td></tr> <tr><td>爱好：<input type="checkbox" name="aihao" value="a" checked="checked">java <input type="checkbox" name="aihao" value=b">html <input type="checkbox" name="aihao" value="c">C++ </td></tr> <tr><td>颜色：<input type="color" name="color" id="color" value="#00FF00"></td></tr> <tr><td>日期：<input type="date" name="DATe" id="date"></td></tr> <tr><td>日期时间：<input type="datetime-local" name="datetime" id="datetime"></td></tr> <tr><td>年龄：<input type="number" name="age" id="age" value="10"></td></tr> <tr><td>工作月份：<input type="range" value="18" max="36" min="6" id="month"></td></tr> <tr><td>博客地址：<input type="url" id="url" placeholder="你的博客地址"></td></tr> <tr><td><input type="reset"> <input type="submit" id="submit"> <input type="reset" value="自定义按钮"> <input type="image" name="image" id="image" src = "C:\Users\14130\Desktop\HTML5\xxbj.assets\image-20231015103846812.png" width="80" height="25" /> <br> </td></tr> </Table> </form> </p> </body> </html>
input元素需要在同1个表按钮单才会起作用
标签元素Label
语法
说明文字
for属性用于关联另一个属性值
<form action="" method="">
<label for="uname"> 账号：</label><input type="text" id="uname" name="user" placeholder="请输入username">
<br>
<label for="password">密码：</label><input type="password" name="password" id="password" placeholder="please input password">
</form>选择栏元素select
select 语法格式
select 元素 必须配合 option optgroup元素使用 有 size属性是组合框 没有是列表框
first secand third fourth fifth sixth seventh eigth
first secand third fourth fifth sixth seventh eigth
多行文本元素 textarea
语法格式
<textarea name = "文本域名" rows = "行数" cols ="列数"> text dafault </textarea>- name: name
- cols: 设置textsarea 文本区的宽度 此属性必须设置
- rows:指定testarea文本区的可见高度 此属性必须设置
- maxlength: 指定文本的最大个数
- readonly:指定文本区为只读 属性值为readonly
- required:指定文本区为非空 只能为required
表单分组
常见的分组元素
fieldset & legend
表单常见的分组格式
分组标题
请选择你的个人爱好 音乐 上网 足球 下棋
请选择个人课程选修情况 computer
math
java
c++
代码实现的矢量元素
need SVG教程
<svg widht = "300" height = "300"> <rect widht = "100%" height = "100%" fill = "black"> </rect> <circle cx = "150" cy="150" r="90" fill="#00FF00"> </circle> </svg>
