HTML标签

最新推荐文章于 2024-09-30 21:15:00 发布

AgostoDu

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量968

点赞数 10

文章标签： javascript html css

本文链接：https://blog.csdn.net/AgostoDu/article/details/142125465

版权

p标签

段落标签，自动换行

2、标题标签

h1-h6

h 1 标题最大，h6 标题最小

3、em标签标识斜体

4、i标签

5、br 表示换行

6、b 标签加粗

（7）strong 标签，表示加粗

（8）s标签：表示删除线

（9）u标签，表示下划线

10、font 颜色

11、sub 下标

12、sup 上标

<!DOCTYPE html>

<html>

<head>

</head>

<p>p标签,也叫段落标签</p>

<h1>标题标签老大</h1>

<h2>标题标签老二</h2>

<h3>标题标签老三</h3>

<h4>标题标签老四</h4>

<h5>标题标签老五</h5>

<h6>标题标签老六</h6>

<strong>strong标签，表示加粗</strong><br />

<u>u标签，表示下划线</u>

<body>

</body>

</html>

13、图片标签

（1）导入本地图片连接

（2）引用网上图片连接

第一种：导入本地图片连接

a、点击img ==右键==打开文件所在目录==将下载好的图片存在img中，在导入图片==

显示图片：

通过img 标签导入图片

（2在网上查找网上图片==找到图片的连接

比如：https://am.zdmimg.com/202408/14/66bc9331583a97117.jpg_e1080.jpg

在html中编写：

可以修改图片的长宽

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>引用网上图片</p>

<img src="https://am.zdmimg.com/202408/14/66bc9331583a97117.jpg_e1080.jpg"/ width="100"

height="100">

</body>

</html>

快捷键讲解：

Ctrl+N再按住W新建一个项目

Ctrl+N再按住H新建一个HTML文件

Ctrl+S保存

Ctrl+x删除一行

strl+z 撤回

Ctrl+R在浏览器中打开

编辑界面输入shift+!+tab键联想出html页面的基本结构

页面字体的放大缩小：

鼠标+滚轮

空格：

shift+7

详解：

target=属性

（1） target=“_blank” 表示将连接的画面内容，在新的浏览器窗口中打开；（打开新窗口）重点

（2）target=“_self” 表示将连接画面内容，显示在目前的窗口中；

（3）target=“_top” 表示将连接画面内容，显示在没有框架的视窗中；

（4）target=“_parent” 表示将连接画面内容，当成文件的上一个画面；

（5）target=“_search” 表示将连接画面内容，搜索区装载的文档

（1）认识表中的一些常用单词

border 边距

align 格式 ‘ center’ 对齐

cellspacing 单元格与单元格的距离

cellpadding 单元格与内容的距离

wedth 宽度

height 高度

tr 表示：行

th 表示：表头

td ：表示列

（2）输入table +回车\

表单：

表单标签格式：form

action：开始网址

method：get和post等等

表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等

用户名格式：text （明文）

密码格式：password （密文）

性别：radio 性别格式性别是单选，单选类型是radio，注意name要加上sex

复选框：checkbox

文本框：textarea

上传文件：file

下拉选择框：select

button：按钮

reset：重置

submit：提交

一、表格标签

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table border="10" align="center" cellspacing=""

cellpadding="" height="100" width="100">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

认识表中的一些常用单词

border 边距

align 格式 ‘ center’ 对齐

cellspacing 单元格与单元格的距离

cellpadding 单元格与内容的距离

wedth 宽度

height 高度

tr 表示：行

th 表示：表头

td ：表示列

（2）输入table +回车\

（2）合并行

单词：rowspan="2" 2是代表合并的行数

（3）合并列 colspan="2"

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table border="10" align="center" cellspacing=""

cellpadding="" height="100" width="100">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

表单5

一、熟悉表单的单词

表单标签格式：form

action：开始网址

method：get和post等等

表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等

用户名格式：text （明文）

密码格式：password （密文）

性别：radio 性别格式性别是单选，单选类型是radio，注意name要加上sex

复选框：checkbox

文本框：textarea

上传文件：file

下拉选择框：select

button：按钮

reset：重置

submit：提交

二、实战操作

单词：form

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

用户名：

</p>

<p>

密码：

</p>

<p>

性别：

<input type="radio" name="sex" id="" value="" />男

<input type="radio" name="sex" id="" value="" />女

</p>

<p>学习内容：

<input type="checkbox" name="" id="" value="" />mysql

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />html

</p>

<p>

自我介绍: <br />

</p>

<p>

</p>

<p>学历

</select>

</p>

</form>

</body>

</html>

详解：

一、基本介绍

1、定义：html是一种超文本标记语言，也是一种标识性语言（不是编程语言）

标记：记号（绰号）

超文本：就是页面内容可以包含图片、链接，音乐，视频等素材。

2、为什么学习html？

（1）测试页面元素，了解页面页面元素（页面是html语言编写的）

（2）进行ui自动化需用到元素定位

3、html有哪些特点？

（1）简易性

（2）可拓展性

（3）平台无关性

（4）通用性

4、什么人员使用html？

（1）前端开发：

javascript +html+css

H5=html5（html第5版本）互相装换成web页面和app页面

前端开发的职责：负责页面设计，页面排版(html)

后端开发:负责后台业务逻辑，使用编程语言，前后端需要业务对接(python)

（2）测试

定位元素，实现ui自动化

5、html查看方式？

（1）第一种方式：

fn+f12 或f12

（2）第二种方式

浏览器中====更多工具====开发者工具

6、如何查看元素？

f12+fn====点击小箭头=====在去点击自己要查看的元素

7、切换web和app端模式（h5）

=====================================

二、安装工具hbilder

（1）hbilder 编译器ide工具，是一个能编写html源码工具，也是一个开发工具；

（2）html就是我们被用做www的网址

（3）目前公司用web语言就html （h5）

javascript=js（简写）

（4）安装步骤：

a、百度中下载hbuilder

b、解压：

c.右键快捷桌面或直接打开

e点击图标，启动，点击暂不登录

f.打开界面，表示安装成功

g、先建项目，在建一个html文件，在运行

（1）新建项目，file==右键==新建项目（快捷键ctrl+n+w）

（2）编辑项目

新建好的项目：在js在新建html文件

（2）新建html文件

在js===右键====新建====html文件（快捷方式：ctrl+n+h）

编辑html文件

（3）html基本格式（通过！+tab键联想出来）

页面基本格式：

================================

三、

html快捷键：

（1）ctrl+n+w 创建项目

（2）ctrl+n+h 创建html文件

（3）ctrl+s 保存）（未保存显示*号）

（4）ctrl+r 运行

（5）ctrl+z 撤回

（6）！+tab键联想基本格式

（7）ctrl+/ 注释和取消注释

（8）ctrl+鼠标滚轮，字体方大和缩小

================================

四、认识标签

1、标题标签（h1--h6）

h1是最大的标签

h6是最小的标签

输入方式：

（1）h1+tab键

（2）h2+enter键

2、段落标签（p标签）

3、其他标签

（1）空格

（2）em 标签表示斜体

（3）i 标签表示斜体

（4）br 表示换行

（5）b 标签表示加粗

（6） strong 标签表示加粗

（7）s 标签表示删除线

（8）u 标签表示下划线

（9）font 颜色

（10）sub下标

（11）sup上标

===================================

图片标签：

（1）引用本地图片

a .通过打开文件所在目录，存放图片

b、通过拖拽到img中图片

c.导入图片img 加上宽度，长度

案例：<img src="../img/山水画001.jpg" alt="" / width="100" height="100">

（2）引用网上图片

a. 网上图片的链接：

打开图片，右键=====复制（图片地址）======将复制的地址黏贴到src中

img链接：https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F0a2186762369x2331905615b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656398879&t=4d9915d3b0119bcb081b464d77d2fc0e

b.通过查看图片的元素获取src

通过查看的图片====点击元素====查看src

==================================

链接标签

（1）定义：从一个网页指向另一个网页的目的地，这个目标可以是一个网页，也可以是相同上的位置，还可以是图片，一个文件，一个应用程序等；

（2）四种类型：

a.新连接覆盖原连接

b、新开一个窗口

c、图片连接

d、死链接

（3）链接用a标签

案例：

新连接覆盖原连接

案例2：

target="_blank"

详解：

target=属性

（1） target=“_blank” 表示将连接的画面内容，在新的浏览器窗口中打开；（打开新窗口）重点

（2）target=“_self” 表示将连接画面内容，显示在目前的窗口中；

（3）target=“_top” 表示将连接画面内容，显示在没有框架的视窗中；

（4）target=“_parent” 表示将连接画面内容，当成文件的上一个画面；

（5）target=“_search” 表示将连接画面内容，搜索区装载的文档

案例3：

案例4：

死链接：

====================================

列表标签

1、有序列表

ol 表示有序列表（order lists 简称ol）

修改排序内容：a，A,1

快速生成有序列表

案例：ol*2>li*3

2、无序列表

ul 表示无序：（unordered lists 简写：ul）

无序类型:

(1)circle 空心圆点

（2）disc 实心圆点（默认实心点）

（3）square实心方块

快速生无序列表

案例：ul*2>li*3

========================================

表格： table

（1）认识表中的一些常用单词

border 边距

align 格式 ‘ center’ 对齐

cellspacing 单元格与单元格的距离

cellpadding 单元格与内容的距离

wedth 宽度

height 高度

tr 表示：行

th 表示：表头

td ：表示列

（2）输入table +回车

（3）编辑表格

合并行：

rowspan=‘行数’

合并列：

colspan =“行数”

案例：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

================================================

表单：

表单标签格式：form

action：开始网址

method：get和post等等

表单标签：主要用来收集用户输入信息如：登入、注册、搜索商品等

用户名格式：text （明文）

密码格式：password （密文）

性别：radio 性别格式性别是单选，单选类型是radio，注意name要加上sex

复选框：checkbox

文本框：textarea

上传文件：file

下拉选择框：select

button：按钮

reset：重置

submit：提交

=========================================

css

层叠样式

（1）定义：css是一种用来表现html或xml等文件样式的计算机语言。

（2）css 不仅可以静态的修饰网页，还可以配合各种动态对网页元素进行格式化；

（3）层叠样式表有两种方法：

第一种：在head中加上style属性

第二种：通过外链方式

在css中新建一个css文件，在css文件中写内容

在使用link 通过外链方式实现

（1）新建css文件，并且编辑

===========================

（1）id选择器

在id属性值前加#

（2）class选择器

在class属性值前加.

(3) 标签选择器

（4）组合选择器

（5）伪类选择器

（6）字体样式和文本样式

=====================

作业：

<!DOCTYPE html>

<html>

<head>

<title>学生登记表</title>

</head>

<body>

<tr>

th{font-size: 25px;}

</style>

<th height="90" colspan="2">学生登记报名表</th>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td>

<input type="radio" name="sxe"id=""value=""/>男

<input type="radio" name="sxe"id=""value=""/>女

</tr>

<tr>

<td>

<input type="checkbox" name="" id="" value="" />html

<input type="checkbox" name="" id="" value="" />mysql

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />python

</td>

<tr>

<td>

<option value="">-选择就读的学校-</option>

</td>

<tr>

<td>

</td>

</tr>

<td>

</td>

</table>

</frome>

</body>

</html>

　　作业2：

<!DOCTYPE html>

<head>

<! -- llink rel="stylesheet" href="../css/Explore.css">

<style>

* {

margin: 0;

padding: 0;

}

body {

width: 25%;

margin-right: auto;

margin-left: auto;

}

body div {

background-color: red;

}

div {

border: 1px solid black;

}

.grid_container {

display: grid;

grid-template-columns: 1fr 4fr;

grid-template-rows: 2fr 1fr;

}

div>div:first-of-type {

grid-column-start: 1;

grid-column-end: 3;

text-align: center;

}

div>div:last-of-type{

grid-column-start: 1;

grid-column-end: 3;

text-align: center;

}

div>div:nth-child(3),

div>div:nth-child(5),

div>div:nth-child(7) {

text-align: center;

}

</style>

<title>Document</title>

</head>

<body>

<h2>学生报名登记表</h2>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<input type="radio" name="gender">男

<input type="radio" name="gender">女

</div>

<div>

<input type="checkbox" name="subject">html

<input type="checkbox" name="subject">pyhton

<input type="checkbox" name="subject">linux

<input type="checkbox" name="subject">mysql

</div>

<div>

<option value="none" selected disabled hidden>-选择我的学校</option>

</select>

</div>

<div>

</div>

</div>

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr><th colspan="2">学生登报名记表</th></tr>

</tr>

<tr>

</tr><tr>

</tr><tr>

</tr>

<tr><td>选择科目</td><td><input type="checkbox" name="" id="" value="" />html

<input type="checkbox" name="" id="" value="" />python

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />mysql</td></tr>

<option value="">选择就读的学校</option>

<option value="">白城师范学院</option>

<option value="">皖南医学院</option>

<option value="">上海交通大学</option>

<option value="">北京戏剧学院</option>

</select></td></tr>

</form>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>学生报名登记表</title>

#ziti{

font-family: "微软雅黑";

font-weight: 300;

}

#j{text-align:center

}

</style>

</head>

<body>

<tr>

<th colspan="2"><h3 >学生报名登记表</h3></th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><input type="radio" name="sex"/>男

</tr>

<tr>

<td><input type="checkbox" name="" id="1" value="" />html

<input type="checkbox" name="" id="1" value="" />mysql

<input type="checkbox" name="" id="1" value="" />linux

<input type="checkbox" name="" id="1" value="" />python</td>

</tr>

<tr>

<option value="">选择就读的学校</option>

</select></p></td>

</tr>

<tr>

</tr>

<tr>

</p>

</td>

</tr>

</form>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>学生登记报名表</title>

font-size: 20px;

font-weight: bold;

}

</style>

</head>

<body>

<tr>

<p>学生登记报名表</p>

</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex"/> 男

<input type="radio" name="sex"/> 女

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="" id="" value="" />html

<input type="checkbox" name="" id="" value="" />mysql

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />python

</td>

</tr>

<tr>

<td>

<option value="">请选择就读的学校</option>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<th colspan="2">学生登记报名表</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" id="" value="" />男

<input type="radio" name="sex" id="" value="" />女

</td>

</tr>

<tr>

<td>

<input type="checkbox" name="" id="" value="" />html

<input type="checkbox" name="" id="" value="" />python

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />mysql

</td>

</tr>

<tr>

<td>

</select>

</td>

</tr>

<tr>

</tr>

</td>

</tr>

</body>

</html>

<!DOCTYPE html>

<head>

<! -- llink rel="stylesheet" href="../css/Explore.css">

<style>

* {

margin: 0;

padding: 0;

}

body {

width: 25%;

margin-right: auto;

margin-left: auto;

}

body div {

background-color: red;

}

div {

border: 1px solid black;

}

.grid_container {

display: grid;

grid-template-columns: 1fr 4fr;

grid-template-rows: 2fr 1fr;

}

div>div:first-of-type {

grid-column-start: 1;

grid-column-end: 3;

text-align: center;

}

div>div:last-of-type{

grid-column-start: 1;

grid-column-end: 3;

text-align: center;

}

div>div:nth-child(3),

div>div:nth-child(5),

div>div:nth-child(7) {

text-align: center;

}

</style>

<title>Document</title>

</head>

<body>

<h2>学生报名登记表</h2>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<input type="radio" name="gender">男

<input type="radio" name="gender">女

</div>

<div>

<input type="checkbox" name="subject">html

<input type="checkbox" name="subject">pyhton

<input type="checkbox" name="subject">linux

<input type="checkbox" name="subject">mysql

</div>

<div>

<option value="none" selected disabled hidden>-选择我的学校</option>

</select>

</div>

<div>

</div>

</div>

</form>

</body>

</html>

AgostoDu

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫