HTML5

最新推荐文章于 2024-11-03 19:27:37 发布

qq_51467754

最新推荐文章于 2024-11-03 19:27:37 发布

阅读量251

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/qq_51467754/article/details/118794167

版权

本文详细介绍了HTML5的基本语法，包括如何使用文本编辑器创建和预览HTML文件，以及HTML5的主要元素，如标题、段落、样式、链接、图片和表单。还讲解了字体样式、短语格式、特殊格式、列表、表格、注释、表单元素以及按钮的使用。此外，提到了浏览器兼容性和HTML5的文档声明<!doctype html>的重要性。

摘要由CSDN通过智能技术生成

HTML5

需要准备的软件：1.文本编辑器 2.浏览器

在文本编辑器中（我选择的是vscode）写好代码后保存，此时想要打开文件可以在浏览器里选择打开文件，或者可以在文件保存的位置对文件进行选择打开方式然后用浏览器打开

尖括号括起来的东西表明这个是标记而不是正文

浏览器不会把标记拿出去显示

<html>
...           //正文
</html>

结尾的标记是 /

<head>
...                //head中间的是代码块这类似的东西，不会在html中显示出来
</head>

<body>
...                //body中间的东西表示会在html中显示也就是正文
</body>

<head>
         <title>
             ...            //title一般放在head中间，一般用于存放标题
         </title>
</head>

不同的浏览器可能支持不同的编码，所以为了方便起见，需要在里面加上

为了告诉浏览器这个文件是以html5的标准编写的，需要在开头加上

< !doctype html >

段落

如果不加段落，html会自动忽略掉文章中的换行回车空格等等，就会看上去像一整篇没有布局的文章

<p>               //这样就是一个段落
...
</p>

这样打出来的效果是

123456789123456

//中间会自动空一行

123456789123456

< br >

< br > 加在语句末尾表示换行，与段落不同，不会间隔一行

效果是这样的：

123456789123456

n级标题 < h1 > < h2 >…

<h1>123456</h1>

这样就表示123456是一级标题，需注意的是< h >这种标题必须单独占一行，所以不需要加< br >进行换行

如果有多个连续的标题，如果需要将他们组合起来的时候就可以使用

<hgroup>
    <h1>...</h1>
    <h2>...</h2>
</hgroup>

但貌似不组合起来也没有什么区别。。

对于英文单词的连字符操作< wbr >

<wbr> hello </wbr>

表示hello这个单词是可以分开的，具体的意思就是说如果hello这个单词刚好在句末，并且句末的空间放不下整个单词的时候，就会在下一行用连字符把放不下的字符连接起来

字体样式

1.加粗

<b>...</b>              //中间的字符就会被加粗

2.斜体

<i>...</i>              //中间的字符会变成斜体

加粗和斜体可以一起使用，就可以使字段又加粗又是斜体

3.打字机字体

<tt>...</tt>

4.小化字

<small>...</small>

5.删除及新增

<del>a</del><ins>b</ins>

这样原来的a中间就会加上一条删除符，b的下面就会加上一条下划线，a仍然是存在的，就是多了一条删除符

6.不被提倡使用的字段

<s>...</s>

这样中间的字段就是不被提倡使用的，也是中间会加上一条横线（与删除的表现是一致的，但是意义是完全不一样的）

7.数学表达式之中的上标和下标

a<sup>2</sup>+b<sub>0</sub>

这样就是a的平方加上b0，sup表示上标，sub表示下标

8.特别强调，高亮

<mark>...</mark>

中间的字符会被加黄强调（高亮），就像这样 …

短语格式

1.强调

<em>...</em>

2.着重

<strong>...</strong>

3.定义

<dfn>...</dfn>

4.代码

<code>...</code>

5.示例代码

<samp>...</samp>

6.用户输入

<kbd>...</kbd>

7.变量

<var>...</var>

8.引用

<cite>...<cite>

这些短语格式视觉效果上来讲就是字体的不同，比如强调是斜体，着重是加粗等等，不同的浏览器上也可能会有不同的视觉效果，但是浏览器是知道这些文字具体是什么作用的

特殊格式

1.地址

<address>
...    
</address>

中间的是一串地址，可以加br等等调整

2.缩进

<blockquote>
    ...
</blockquote>

中间的字符会自动缩进，可以嵌套使用，也可以加< br >这样每行都会进行缩进

3.预格式化

<pre>
...
</pre>

中间的字符不会自动进行处理，就是原来是怎么样的他就是怎么样的，就可以不用加< br >进行换行等等，代码也可以长成原生的模样

属性

1.hr(分割线)

单一个< hr >表示一条分割线，hr尖括号里面可以加属性来修改这条分割线的属性例如

<hr width=50% align=left size=50>

这样就表示分割线的长度变成页面的50%，靠页面的左边，以及宽度是50个像素点

2.所有标签内部都可以添加一个titile的属性

<h1 title="123">123456456</h1>
<p title="456">
123123
</p>

这样的话鼠标停留在对应标签上时就会出现一个小框显示你title中放的东西，就像是注解一样

3.bdo bdi

<bdo dir=rtl>
123<bdi>456</bdi>789
</bdo>

dir->direction rtl->right to left

这样的话总的语句的顺序就会是从右到左，反过来了，但是bdi又把bdi语句中的顺序修改回去了

结果就会变成：

987456321

4.变号字体

有些浏览器中比如大写小写字符等等不会被显示，这个时候就要使用变号字体

& lt; 小于

& gt; 大于

&amp；表示&号

& nbsp；表示一个空格（不可被打断的空格）

列表

1.没有1.2.3.等等开头的列表

元素间会自动换行

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

这样显示的结果是：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0pdwCPUf-1626414414118)(C:\Users\11234\Desktop\notes\image-20210715155606322.png)] 在这里插入图片描述

2.有1.2.3.开头的列表

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

这样的结果是：

在这里插入图片描述

3.词条

<dl>
    <dt>你</dt>     //词条名
    <dd>小红</dd>   //注解
    <dt>我</dt>     //第二个词条名
    <dd>小黄</dd>
</dl>

效果是：

在这里插入图片描述

图片

图片在html中被视为一个特殊的字符

本地图片的写法：

<img src="./QQ图片20210321170230.jpg">    //需注意要放到同一个目录下面

图片链接的写法：

<img src="https://how2j.cn/example.gif"/>

图片绝对路径的写法：

<img src="file://C:\Users\11234\Desktop\图片./QQ图片20210321170230.jpg">

在绝对路径前面需要加上file://

调整图片的大小：

<img src="./QQ图片20210321170230.jpg" width=50%> //图片宽度变为原来的50%，高度等比例
<img src="./QQ图片20210321170230.jpg" width=50>  //宽度变成50个像素点
<img src="./QQ图片20210321170230.jpg" width=50 hight=50>  //注意此时两个都改不会像之前那样是原比例的

只修改宽度高度其中一个的时候另一个会按原来的比例自动调整，但同时修改就不会按比例了

调整图片的位置：

<div align="left">
  <img src="./QQ图片20210321170230.jpg">    //图片会在画面的左上角
</div>
<div align="center">
  <img src="./QQ图片20210321170230.jpg">    //图片会在画面的中间
</div>
<div align="right">
  <img src="./QQ图片20210321170230.jpg">    //图片会在画面的右下角
</div>

截取网站实时内容：iframe

<iframe src=https://www.bilibili.com/></iframe>

这样就会把这个网站实时的内容显示在这个html文件之中，点击链接也是会跳转的，也可以用width这种调整这个实时画面

超链接：

<a href=https://www.bilibili.com/>哔哩哔哩</a>

href后面加链接的网址，两个标签之间加上的是注解，就会像是这样的：

在这里插入图片描述

href之后也可以跟html文件中的内容，比如说：

<a href=#here>跳转</a>   
<p id="here">
跳转到这里
</p>

然后点击那个跳转就会跳转到“跳转到这里”

id在绝大多数的表示结构的标签之中可以放比如h1这种等等

跳转也可以跳转到不同文件的某个id上，就比如

<a href=wenjian.html#here>跳转</a>

隐形链接

<img src="./QQ图片20210321170230.jpg" usemap="#zheli">
<map name="zheli">
    <area shape="rect" coords="0,0,50,50" href=https://www.bilibili.com>
    <area shape="circle" coords="75,75,25" href=https://www.bilibili.com>
</map>

这个隐形链接的意思就是说这张图片，在第一个区域，是一个正方型的区域，是（0，0）到（50，50）这个区域，在这个区域里点一下就会跳转到某个网站，在第二各区域，是圆形区域，圆心是（75，75）半径是25，在这个区域点一下就会跳转到某个网站。

表格

<table border="1">        //border="1"表示这个表格有表格线，不然的话就是一个没有边框的表格
        <caption>表格</caption>  //表格的标题
        <tr>                    //tr表示这是表格的一行
            <th>number</th>    //th表示这一行是表格的表头的元素
            <th>name</th>
            <th>age</th>
        </tr>
        <tr>
            <td>1</td>         //td 表示这个是表格的普通的元素
            <td>小红</td>
            <td>8</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小黄</td>
            <td>10</td>
        </tr>
</table>

效果就是这样的：

在这里插入图片描述

合并单元格：

<td colspan="3">blank</td>

colspan表示这个单元格占多少个横的格子，rowspan表示占多少竖的格子，可以借此来合并单元格

效果如图：

在这里插入图片描述

真正意义上的表头表尾：

<thead>
    ...
</thead>
<tbody>
    ...
</tbody>
<tfoot>
    ...
</tfoot>

与th的不同就在于这个表头表尾会永远在表格之中显示，就是很长的表格时无论怎么下拉表头和表尾永远会出现在表格之中。

how2j补充

1.html使用进行注释

注释通常用于解释一段代码的意义
注释不会在网页上显示出来

2.< div >< span >这两种标签都是布局用的，这种标签本身没有任何显示效果，通常是用来结合css进行页面布局

div是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong

3.字体：font

<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>

4.表单元素

1.文本框

<input type="text" size="10">   //type表示表单的种类，size表示表单的大小

初始值value

<input type="text" value="有初始值的文本框">

背景文字placeholder

<input type="text" placeholder="请输入账号">

2.密码框

<input type="password">

3.提交数据的表单 form

常用的提交数据的方式 method=“get”（会显示提交的的参数）

<form method="get" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

效果是这样的：

在这里插入图片描述

另一种提交的方式 method=“post” （不显示提交的参数，一般用于提交文件等二进制的数据）

<form method="post" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

4.单选框

单选1 <input type="radio" >
单选2 <input type="radio" checked="checked">

checked="checked"表示默认选中这个选项

一组单选的写法：

学习java<input type="radio" name="activity" value="学习java" > <br/>
东京热<input type="radio"  name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity"  value="lol"> <br/>

只要修改标签上的属性，使他们的name属性相同就能够做到一组单选，意思就是同时只能选中一个选项

5.多选框

学习java<input type="checkbox" value="学习java" > <br/>
东京热<input type="checkbox"  value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>

type="checkbox"表示多选框

6.下拉列表

<select size="2" multiple="multiple">
 <option >小明</option>
 <option >小红</option>
 <option >小美</option>
</select>

size表示列表的高度，multiple="multiple"表示可以使用ctrl或者shift进行多选

注意，列表的默认选中与选框的不同，列表的默认选中是：

selected="selected"

7.文本域

<textarea>
abc
def
</textarea>

可以使用rows和cols设置宽度和行数

8.按钮

1.普通按钮

<input type="button" value="普通按钮">

普通按钮不能提交form表单的数据，就只是一个最普通的按钮

2.提交按钮

<input type="submit" value="提交按钮">

提交按钮能够提交表单的数据

3.重置按钮

<input type="reset" value="重置按钮">

重置按钮能够重置你的输入

4.图像提交按钮

<input type="image" src="https://how2j.cn/example.gif">

图像按钮就是把提交按纽的那个东西变成了你所选的那个图像，其他功能没有差别

5.按钮标签

普通的按钮

<button>按钮</button>                   //中间也可以放图片，放的就是那个按钮上会显示的东西

能够提交的按钮：

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
</form>


可以使用rows和cols设置宽度和行数

#### 8.按钮

1.普通按钮

```html
<input type="button" value="普通按钮">

普通按钮不能提交form表单的数据，就只是一个最普通的按钮

2.提交按钮

<input type="submit" value="提交按钮">

提交按钮能够提交表单的数据

3.重置按钮

<input type="reset" value="重置按钮">

重置按钮能够重置你的输入

4.图像提交按钮

<input type="image" src="https://how2j.cn/example.gif">

图像按钮就是把提交按纽的那个东西变成了你所选的那个图像，其他功能没有差别

5.按钮标签

普通的按钮

<button>按钮</button>                   //中间也可以放图片，放的就是那个按钮上会显示的东西

能够提交的按钮：

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
</form>