【html5学习笔记】

Felix51

已于 2022-12-09 17:50:14 修改

阅读量141

点赞数

文章标签： html5 学习前端

于 2022-12-09 17:49:44 首次发布

本文链接：https://blog.csdn.net/Pyhon_new/article/details/128253932

版权

# HTML5简介：

称为超文本标记语言
双标签：如<html></html>

单标签：如<img>

Doctype是document type（文本类型）属于声明，<***!DOCTYPE html***>位于文档最前面，是网页的必备组成部分

## HTML的基础骨架

### <html>标签

<html></html>定义了文档的开头和结尾

### <head>标签

<head>绝大多数只给开发者看的，绝大多数不会显示在页面给用户看

### <body>标签

<body>元素定义文档的主体，包含文档的所有内容（比如文本，超链接，图像，表格和列表等等），显示给用户看

### <title>标签

<title>元素是显示在浏览器窗口的标签栏或者状态栏上的，***写了<head>一定要写<title>***，SEO优化：搜索引擎优化，利于网站排名

### <meta>标签，单标签

**单标签，包含在head标签里面**
<meta>用来描述一个HTML网页文档的属性，关键词等，例如
<meta chraset = "UTF-8"，表示当前编码格式是UTF-8>

### <heading>标题标签，双标签

只用于标题，***标签"<>"里面的内容都是属性***
标题<h1>~<h6>，**只有6级**，**都是双标签**
<h1></h1>是一级标题，最大
....
<h6></h6>是六级标题，最小
<h1 align=left> align属性，align=left就是放置在左边，
生成h1~h6的快捷键：h$*6，6改成4则是生成h1-h4

### <p>段落标签，双标签

定义段落，承载段落

### <br />换行标签，单标签

（比如：<p>"我是一个小画家</br>每天都画画"</p>，在家字后面开始换行）

### <hr/>水平线标签，单标签

<hr color="red" width =" 300px" size = "5px" align="center" />
color:水平线的颜色，width：水平线的宽度，size：水平线的高度 align：水平线的位置

### <img>图片标签，单标签

<img src="../image/1.webp" alt="这是一个小姐姐" width="300px" title="Hello">
src写入图片的路径，alt是图片显示不出来时，显示的提示
width规定图片显示的宽度，title鼠标悬停在图片上时的提示

### <a>超文本链接，双标签

超文本链接，标签中通过href属性来描述链接地址，a标签里面可以放置任何形式（一个字，一组词，一段文本，图片等）
<a href = "url">这是一个链接，你看</a>

### <em> <i><b><strong><del><span>文本标签,都是双标签

文本标签一般表示文本词汇

有序列表，<ol>和<li>，双标签

有序列表始于<ol>标签，每个列表项始于<li>标签
<ol>
<li> 苹果</li>
<li> 橘子</li>
</ol>

<ol>有以下几种属性type = "1"/"a"/"A"/"i"/"I"

列表可以嵌套

无序列表，<ul>和<li>，双标签

始于<ul>标签，每个列表项始于<li>标签

<ul>有以下几种属性type = "disc"/"circle"/"square"/"none"，分别代表实心圆/空心圆/小方块/不显示

快捷键：ul>li*4 快速创建ul li格式的语法，

表格，<table><tr><td>，都是双标签

table：表格表格的属性：border/width/heigh分别设置table的边框线条粗细/table的宽度/table的宽度，比如<table border="1" width = "400" heigh ="400">

tr:行

td:列，合并单元格时水平合并：colspan，垂直合并：rowspan，水平保留左边那个，垂直保留右边那个，如果是正方形或更大，保留左上角那个。写法如下

<td colspan = "2" rowspan = "2">单元格7,8,10,11</td>，同时要记得删除td 8，td 10，td 11

快捷键table>tr*4>td{商品}*3，显示效果：

表单，<form>，双标签

表单在web网页中用来给用户输入信息，从而采集用户信息，是网页具有交互功能

表单由容器和控件组成，一般一个表单包含输入框和按钮等，输入框和按钮叫做控件，表单就是容器，能容纳各式各样的控件

有以下属性：

action：服务器地址，url

name:表单的名称

method：数据提交的方法get/post，get可以在url里看到，post看不到，get用于提交少量数据，post用于提交大量数据

表单的元素：

表单标签：<form></form>

表单域：文本输入框示例如下：用户名：<input type="text">，效果如下

密码框：<input type="password" >，效果如下

表单按钮：输入按钮 <input type="submit" value = "登录"> ，效果如下

块元素和行内元素

块元素独占一行，可以设置宽高等属性，可以包含行内元素和其他块元素常见的块元素

div ，form，h1~h6，hr，p，table，ul等

行内元素不会独占一行，只识别自身大小，行内设置宽高无效，行内元素不会包含块元素

常见的内联元素（行内元素）：

a，b，span，i，strong等

行内块元素（特点：不换行，能识别宽高）：

button，img，input等

div标签：容器标签

    <div id = "header"></div>
    <div id = "nav"></div>
    <div id = "article">
        <div id = "section"></div>
    </div>
    <div id = "silder"></div>
    <div id = "footer"></div>

HTML5新标签--老版本的浏览器无法兼容，比如IE8

<header></header> 头部标签

<nav></nav> 导航

<section></section> 定义文章中的节，比如章节，页眉，页脚

<aside></aside> 侧边栏

<footer></footer> 底部

<article></article> 代表一个独立的、完整的内容块，比如一篇论坛帖子，一篇博客文章，一条用户评论