前端-html、css、JavaScript。常用标签（标题-段落-文本-注释-换行-分割-斜体-粗体-图片-链接-无/有序列表-自定义列表-表格-表单-框架-块）、html5新增标签、媒体标签。

最新推荐文章于 2023-05-11 17:22:33 发布

Tony-1fan

最新推荐文章于 2023-05-11 17:22:33 发布

阅读量347

点赞数

分类专栏：前端文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_39497997/article/details/112712751

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 软件开发

在这里插入图片描述

2 网页开发规范

网页三剑客

html
css
JavaScript

3 网页组成

3.1 网页内容(html5)

3.1.1 html

超文本标记语言

3.2 网页样式(css3)

3.2 网页操作(JavaScript、ecmascript6)

4 浏览器

本质是一个html、css、js的解析渲染执行器

5 html常用标签

5.1 标题标签

h1~h6:字体逐渐变小

5.2 段落标签

5.3 文本标签

span

5.4 注释

ctrl+/

<!-- -->

5.5 换行标签

5.6 分割线

5.7 斜体粗体

i：斜体
strong：粗体
```
knkk
```

5.8 图片标签

<img src = "E:/WorkSpace/Excellent/前端/1610765599635.png">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UnQZU46B-1610784568616)(C:\Users\Tony\AppData\Roaming\Typora\typora-user-images\1610783058889.png)]

5.9 链接

<a href="http://baidu.com:80/index.php">点击</a>

5.10 无序列表与有序列表

ul：无序列表

ol：有序列表

<ul>
	<li>java</li>
	<li>c++</li>
</ul>

<ol>
	<li>java</li>
	<li>c++</li>
</ol>

5.11 自定义列表

<dl>
		<dt>java</dt>
		<dd>666</dd>
		<dt>c++</dt>
		<dd>666</dd>
	</dl>

在这里插入图片描述

5.12 表格标签

table 表格标签
行：tr；列：td
border：表格到边框的距离
width：表格的宽度
height：表格的高度
cellspacing：单元格到表格边框的距离
cellpadding：单元格到内容的距离
align：单元格内容的对齐方式
colspan：列之间的合并
rowspan：行之间的合并

<!-- 表格标签 
	行：tr；列：td 
	border：表格到边框的距离
	width：表格的宽度
	height：表格的高度
	cellspacing：单元格到表格边框的距离
	cellpadding：单元格到内容的距离
	align：单元格内容的对齐方式
	colspan：列之间的合并
	rowspan：行之间的合并
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格标签 行：tr；列：td -->
    <table border="3px" width="800px" height="400px"
    cellspacing="0px" cellpadding="20px" > 
        <tr align="center">
            <td colspan="6">课程表</td>
        </tr>
       
        <tr align="center">
            <td></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>

        <tr align="center">
            <td>8-10</td>
            <td>数学</td>
            <td>c++</td>
            <td rowspan="2">python</td>
            <td>python</td>
            <td>英语</td>
        </tr>

        <tr align="center">
            <td>10-12</td>
            <td>英语</td>
            <td>c++</td>
            <td colspan="2">python</td>
        </tr>
        <tr align="center">
            <td>14-16</td>
            <td>语文</td>
            <td rowspan="2">语文</td>
            <td>数学</td>
            <td>python</td>
            <td>python</td>
        </tr>

        <tr align="center">
            <td>16-18</td>
            <td>体育</td>
            <td>python</td>
            <td colspan="2">python</td>
        </tr>
        
    </table>
</body>
</html>

在这里插入图片描述

5.13 表单标签

<!-- 表单标签 -->

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>

    <body>
        <!-- form: 提交表单使用的 -->
        <!-- <form>
</form> -->


        <!-- 按钮标签 -->
        <input type="button" > <br>
        <!-- 普通文本输入框  type:的默认值为text   placeholder: h5中新增的属性-->
        <input type="text" placeholder="请输入名称"> <br>
        <!-- 数字输入框 -->
        <input type="number"> <br>
        <!-- 密码输入框 -->
        <input type="password">
        <!-- 日期选择框 -->
        <input type="date"><br>

        <!-- 单选框:  name相同就为单选框 -->
        男:<input name="sex" type="radio">
        女:<input name="sex" type="radio">

        <!-- 文件上传标签 -->
        <input type="file">

        <!-- 与上面的  input type=button一致 -->
        <button>你再点我呀</button>

        <!-- 复选框 -->
        java: <input type="checkbox">
        java1: <input type="checkbox">

        <!-- 下拉列表  option:列表项 -->
        <select>
            <option>甘肃省</option>
            <option>陕西省</option>
            <option>河南省</option>
        </select>


    </body>


</html>

在这里插入图片描述

5.14 框架标签

在h5中不建议大家使用框架标签了,渲染效率不高;

frameset: 但是在h5中frameset已经被弃用了,使用iframe来代替

Iframe: 也是一个框架标签

<!-- iframe: 用来代替frameset的
src: ifame要加载的网页
width: 宽度
frameborder:  iframe的边框大小
scrolling: 是否显式滚动条 yes|no
-->
<iframe scrolling="no" frameborder="0px" height="300px" width="400px" src="http://www.baidu.com">
</iframe>

<iframe src="./ops2.html">
</iframe>

5.15 块标签

在html中块(div)标签没有实际的含义,主要用来做布局来进行使用的

5.16 html中的实体符号(了解)

其实在谷歌的内核中已经没有任何的问题了,但是万一要是IE?

&gt;   代表>
&lt;   代表<
&amp;   代表&
...还有很多去w3cschool中去找

6 html5中的新增标签

我们上面讲的这些标签在html5中都是可以使用的;

html5中的新增的标签主要是用来进行 语义化的;

article: 文章标签
header: 网站内容的头
footer: 网站的尾部
.....

7 h5中的媒体标签

<!-- src: 每题路径  controls: 控制栏  -->
<audio src="./music1.mp3" controls></audio>

<!-- 视频标签 -->
<video src="./v1.mp4" controls></video>

Tony-1fan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
前端-html、css、JavaScript。常用标签（标题-段落-文本-注释-换行-分割-斜体-粗体-图片-链接-无/有序列表-自定义列表-表格-表单-框架-块）、html5新增标签、媒体标签。

前端-html、css、JavaScript。常用标签（标题-段落-文本-注释-换行-分割-斜体-粗体-图片-链接-无/有序列表-自定义列表-表格-表单-框架-块）、html5新增标签、媒体标签。
复制链接

扫一扫