HTML讲解

最新推荐文章于 2024-07-25 11:26:35 发布

犹豫啊

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量788

点赞数 19

文章标签： html

本文链接：https://blog.csdn.net/m0_73776815/article/details/136941455

版权

1,HTML入门

HTML介绍

目标

知道什么是HTML

路径

1. 什么是html

2. html可以做什么

讲解

什么是html

超⽂本标记语⾔ ( H yper T ext M arkup L anguage) ，标准通⽤

标记语⾔下的⼀个应⽤。 HTML 不是⼀种编程语⾔，⽽是⼀种

标记语⾔，是⽹⻚制作所必备的。

超⽂本标记语⾔：功能⽐⽂本强⼤ , 就是指⻚⾯内可以包含图

⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素。

超⽂本标记语⾔ : 语法由标签组成

学习 HTML 的核⼼是标签

html可以做什么

设计⻚⾯,做⽹⻚

⼩结

1. 什么是 HTML?

超⽂本标记语法

2. 标记语⾔

设计⻚⾯ , 做⽹⻚

HTML结构和基本语法

⽬标

掌握HTML的结构和基本语法

路径

1. HTML的结构

2. HTML语法规范

3. 标签属性

讲解

HTML的结构

⽂档结构介绍：

⽂档声明：⽤于声明当前 HTML 的版本，这⾥的 <!DOCTYPE html>是 HTML5 的声明

html 根标签：除⽂档声明以外，其它内容全部要放在根标签html 内部

⽂档头部配置： head 标签，是当前⻚⾯的配置信息，外部引⼊⽂件, 例如⽹⻚标签、字符集等

⽂档显示内容： body 标签，⾥边的内容会显示到浏览器⻚⾯上

HTML语法规范

扩展名是 html 或者 htm

html 标签不区分⼤⼩写

<p>........</p>
<p>........</p>
   --------
<p>........</p>
<p>........</p>

html 由头 (head) 和体 (body) 组成

标签是可以嵌套的 , 标签⾥⾯可以放标签

标签⼀般由起始标签开始，结束标签终⽌ ( 成对出现 ) 。但是如果标签不修饰内容，可以在标签⾥结束。

<p id="1">hello</p>
<br/>

标签属性

武器 ( 标签 ) 属性 ( 标签属性 )

攻击之⽖ +6 点攻击⼒

倚天剑 +50 点攻击⼒ 15% 暴击

属性是属于标签的，修饰标签，让标签有更多的效果

属性⼀般定义在起始标签⾥⾯。

<font color='red'>hello</font>

属性⼀般以属性 = 属性值 的形式存在

属性值⼀般⽤ '' 或者 “ ” 括起来。不加引号也是可以的 . (不建议使⽤ )

⼩结

HTML结构

<html>
 <head></head>
 <body></body>
</html>

语法和属性基本和 xml 类似 , 但是不要背 , 练练就⾏了

HTML快速⼊⻔

需求

使⽤ HTML 展示 hello sz85... 字体颜⾊为红⾊

步骤

1. 创建⼯程

2. 创建 HTML

3. 定义 font 标签

4. 设置 font 标签的 color 属性为 red

实现

使⽤idea创建static web项⽬

File -> new -> Module

选择 static web

设置Module的名称

创建html⽂件

在 static web 项⽬上右键 -> New -> Html File

设置HTML⽂件名称

编写HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <!--⻚⾯的标题-->
 <title>第⼀个html⻚⾯</title>
</head>
<!--⻚⾯的内容-->
<body>
 hello world......
</body>
</html>

使⽤浏览器访问

把⿏标移动到右上⻆，会浮动出来浏览器按钮，点击

“Chrome” 按钮，使⽤ Chrome 浏览器打开当前⽹⻚

在浏览器上看到效果

HTML常⽤的标签

HTML标签

字体标签

<font color="字体颜⾊" size="字体⼤⼩(1~7)"
face="字体⻛格">哈哈</font>

标题标签

<hn>标题<hn> n取值1~6, 1是⼀级标题, 2是⼆级标题，3是三级标签，4是四级标签......

段落标签

<p>段落</p>

注意：段落之间⾃动进⾏换⾏

粗体标签（加粗）

<b>内容</b>

斜体标签

<i>内容</i>

下划线标签

<hr/>

换⾏标签

<br/>

插入图片

<img src="路径">

实现文本倾斜效果，强调的程度更强

<em>内容</em>

实现文本下划线效果

<u>内容</u>

文本输入框；

<input />

Ctrl+/: 注释快捷键

单元格标签

表格由<table>标签来定义。
每个表格均有若干行(由<tr>标签定义)
每行被分割为若干单元格(由<td>/<th>标签定义)
<table>           表格
<tr>           表格行
<th>标题</th>       标题单元格
</tr>           表格行
<tr>           表格行
<td>数据</td>       单元格
<td>数据</td>       单元格
</tr>           表格行
</table>           表格
body的属性（注：清除浏览器默认自带的距离）
topmargin="0"
bottom="0"
leftmargin="0"
rightmargin="0"
bgcolor="颜色值"
<form>标签用于声明整个表单，定义数据收集范围，是双标签。基本语法格式<form></form>

下拉列表

<select>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>

selected是<option>的属性值，设置下拉菜单的默认选中项。

<select>
<option selected="selected">选项1</option>
</select>

犹豫啊

关注

19
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
HTML讲解

知道什么是HTML。
复制链接

扫一扫