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

最新推荐文章于 2021-06-03 18:11:23 发布
最新推荐文章于 2021-06-03 18:11:23 发布
阅读量378 收藏 1
点赞数
分类专栏： 前端 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39497997/article/details/112712751
版权

1 软件开发

在这里插入图片描述

2 网页开发规范

网页三剑客

  1. html
  2. css
  3. 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 段落标签

  • p

5.3 文本标签

  • span

5.4 注释

ctrl+/

<!-- -->

5.5 换行标签

  • br

5.6 分割线

  • hr

5.7 斜体 粗体

  • i：斜体

  • strong：粗体

    <p><i><strong>knkk</strong></i></p>

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
关注
专栏目录
JS标准标签
weixin_65423584的博客
04-13 906
【注意】 在页面上面最好不要出现<%%>，而是用jsp标签代替 常用jsp标签(自带): 1.<jsp:include page="页面"> 包含 2.<jsp:param name="name" value="va"> 传参 3.<jsp:foward page="页面"> 转发 !-- 指令包含(静态包含)： 所有被包含页面只有在单独运行的时候才会被单独编译--> <%@include file="header.jsp"...
JavaEE-v4.0-HTML-授课
InLoadwetrust的博客
02-09 544
JavaEE-v4.0-HTML-授课 1 HTML快速入门 1.1 网页的介绍 网络世界已经跟我们息息相关，当我们打开一个网站，首先映入眼帘的就是一个个华丽多彩的网页。这些网页，不仅呈现着基本的内容，还具备优雅的布局和丰富的动态效果，这一切都是如何做到的呢？前端入门课程，为您一层层的揭开网页的面纱。 网页的构成 HTML：用来制作网页基础内容和基本结构。 CSS：用来制作网页美化效果。 JavaScript：用来制作网页动态效果。 1.2 HTML的介绍 1.2.1 HTML的介绍 HTML（
JavaScript入门之一：HTML常用标签、Js基本语法
thewebcode
09-27 205
HTML常用标签： &lt;html&gt; &lt;head&gt; &lt;title&gt;浏览器标题html-hello World&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;center&gt; &lt;h2&gt;&lt;b&gt;&lt;i&gt;hello
js a 标签常用
houdabiao的博客
04-02 320
a 标签取消默认的点击跳转刷新：
html/js中的常用标签
enthan809882的博客
03-10 340
主要就是为了快速复制。 常用代码： <script type="text/javascript" src="http://www.test.com/js"></script> <link rel="stylesheet" type="text/css" href="http://www.test.com/common.css"> <style id="stylus-3" type="text/css" class="stylus"> body{ }
js常用动作标签
qq_43519651的博客
07-15 254
一丶​​​​​​JSP的动作标签: 常用的动作标签 <jsp:forward/> ：请求转发。 <jsp:include/>：包含（动态包含）。 <jsp:param/>：传递参数。 ...
斑码教育大前端课堂笔记-html第四天
10-11
3. **文本格式化标签**：如（粗体）、（斜体）、（下划线）、（删除线）等，用于改变文本的显示效果。 4. **链接与图像**：标签用于创建超链接，可跳转到其他页面或资源；标签插入图片，需指定src属性指向图像路径...
前端入门：HTML课堂笔记-基础与文本、图片标签解析
"Day02 HTML课堂笔记记录了HTML的基本语法、标签使用、文本标签、图片处理以及路径知识，适合前端零基础入门学习者。" 在前端开发中，HTML（超文本标记语言）是构建网页的基础。这篇课堂笔记详细介绍了HTML的一些...
狂神说-HTML.pdf
11-12
5. **字体样式标签**：HTML提供了如`<b>`（粗体）、`<i>`（斜体）、`<u>`（下划线）等标签来改变文本样式，但现代Web开发更倾向于使用CSS来控制样式。 6. **注释和特殊符号**：`<!-- -->`是HTML的注释语法，用于...
accp5.0 S1 HTML 1-7章
11-28
4. **文本格式化**：通过`<b>`（粗体）、`<i>`（斜体）、`<u>`（下划线）等标签，我们可以对文本进行格式化，以增强可读性和视觉效果。 5. **列表类型**：HTML支持有序列表（`<ol>`和`<li>`）和无序列表（`<ul>`和`...
JavaScript资料（html常用的标签，必须记住的30个标签）
07-20
html常用的标签，用于大家学习html css和JavaScript和jQuery
javascript中的常见标签
高级程序猿一枚，多年前后端经验。记录分享遇到问题，了解最新知识。
09-16 5724
1、字体：&lt;font&gt; &lt;font size="7"color="#fff000"&gt;数据&lt;/font&gt; 特殊部分：如果在页面显示一些特殊符号，需要进行转义 标题：&lt;h1.....6&gt; ---------------------- 2、列表标签：&lt;dl&gt;&lt;/dl&gt;       上层项目：&am
jquery中的常用标签
weixin_40214184的博客
03-19 470
1、.val(): (1)val("hello world"):表示的是替换原来的值 (2) val():表示获取到指定元素的值 3、遍历元素each()方法 3、判断数组中是否包含某个元素使用的方法是：$.inArray(元素（字符串），数组名称)，当该元素存在的话就返回下标，元素不存在就返回的是-...
Wordspress 自动在js中添加<p>段落标签
狂热代码份子
10-07 1051
解决办法 在functions.php碎片中添加如下代码 remove_filter( 'the_content', 'wpautop' ); remove_filter( 'the_excerpt', 'wpautop' );
常用js
pengone的博客
03-15 494
window.open的页面如何刷新(父页面)上层页面 window.opener.location.reload(); js 取小数后面的一位小数： parseInt(val.average_score*10)/10 js 返回上个页面并刷新 <a href="javascript:history.go(-1);location.replace(document.refer...
＜ i ＞标签 斜体
纸 鸢
09-17 553
HTML < i > 标签 - - - 斜体 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>i标签</title> </head> <body> <p>正常文本</p> <p><i>斜体文本</i></p> </body&g.
javascript常用标签整理
liuhua_sun的专栏
11-04 920
很早就学习了javascript，但是她的强大着实然人震撼，自己用过的又在网上找了些觉得比较使用的今天就在这里当作笔记晒一晒，鼓励自己好好走下去！1．让文字不停地滚动 　　滚动中2．记录并显示网页的最后修改时间 　　　　      document.write("最后更新时间: " + document.lastModified + "") 　　3．关闭当前窗口 　　 
html中斜体样式怎么写,html <i> 斜体标签
热门推荐
weixin_36019798的博客
05-30 1万+
html I斜体标签html i标签html标签之html字体斜体标签标签教程。html斜体标签是用于改动文字字体显现名目，i让字体斜着闪现。在结构中大面积使用不是很多，但在小部门为了达到排版都雅或某个须要，无意偶尔对文字字体斜体表示，即可以或许使用html i标签来实现(懂得和html i同样有着让字体倾斜斜体展示html em比较张扬标签)。一、html 斜体i语法结构1、html i语法...
html让两个无序列表换行,HTML 列表
weixin_36282704的博客
06-03 791
HTML 列表HTML 支持有序、无序和定义列表:HTML 列表有序列表The first list itemThe second list itemThe third list item无序列表List itemList itemList item在线实例无序列表本例演示无序列表。有序列表本例演示有序列表。(可以在本页底端找到更多实例。)HTML无序列表无序列表是一个项目的列表，此列项目使用粗体...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值