HTML基础知识详解与常见元素应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58957340/article/details/123216803

五大浏览器：谷歌，火狐，IEopera，欧朋，safari苹果

什么叫html：（HyperText Markup Language）即超文本标记语言

标记标签：双标记标签：<标签名>内容<标签名>

单标记标签：<标签名>

HTML文档基本结构: <!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

<title>网页标签页标题</title>

</head>

<body>

</body>

</html>

段落标签（块元素）:<p>段落内容</p>（是一个块元素，自带样式独占一行，带有上下边距）

图片标签:格式：<img src=""alt="">

：src 用来表示图片的引入路径：

1.当html文件与图片在同一目录下，src的值直接写图片名称

例如：<img src="pj2.jpeg">

2.当html文件与图片所在文件夹在同一目录下，src的值是先写图片所在文件夹名称，在写图片名称

例如：<img src="img/pj2.jpeg">

3.当html文件所在文件夹与图片在同一目录下，src的值先通过../跳出当前目录在写图片名称

例如：<img src="../pj2.jpeg">

4.当html文件所在文件夹与图片所在文件夹在同一目录下，src的值先通过../跳出当前目录在写图片所在文件夹名称，在写图片名称

例如：<img src="../img/pj2.jpeg">

alt 当图片加载失败时，用来替代图片文本（没有限制）

例如：<img src="../img/pj2.jpeg" alt=“图片未加载出来，请稍等......”>

width 高度

height高度

title 鼠标放到标签上的提醒文本

标题标签（块元素）：相同点：都加粗，都是块元素不同点：字体以此减少

换行<br>:单标记标签

水平线<hr>（块元素）

格式：<hr width(宽度)=""align（水平方向对齐方式）=""color(颜色)="">

width(宽度）

align水平方向对齐方式

center 居中对齐

left居左对齐

right 居右对齐

color 修改水平线的颜色

size改变水平线粗细

默认大小沾满浏览器正行

列表标签（块元素）

无序列表：

<ul>

</ul>

有序列表：

<ol>

</ol>

表现元素：

加粗

<strong>内容</strong>：主旨表强调

倾斜

<i></i>

<em>内容</em>：主旨表强调

上下标：

上标：<sup>内容</sup>

下表：<sub>内容</sub>

小号字体：<small>内容</small>

超链接

格式：<a href="" target=""内容</a>

href 引入跳转页面路径

1.跟网址：<a href="http://www.网址。coml">点击进入2网页</a>，点击文字进入2.html

2.相对路径

3.锚链接：#加id赋予的值

4. 在新窗口中打开链接：target="_blank"

行内框架

格式：<iframe（行内框架） src=”” frameborder=””></iframe>

src 引入页面路径

frameborder：框架的边框

frameborder=“0”无边框

frameborder=“1”有边框

表格：表格的基本结构

1.定义表格的基本框架：<table></table>

2.定义表格的行：<tr></tr>

3.定义表格中行内的单元格：<td></td>

4.定义表格中行内的单元格（标题），自动将文本加粗，居中对齐：<th></th>

5.定义表格的基本框架：

border表示表格边框

cellspacing单元格与单元格的距离

cellpadding单元格边距，内边距，内容与单元格边框四周的距离

bordercolor修改表格边框颜色

bgcolor修改表格单元格背景颜色，可以单独给单个单元格或行

align水平对齐方式 left居左对齐 right 居右对齐 center 居中对齐（可以加给整个表格也可以加给行或单独单元格

6.表格基本结构：

<table>

<tr>

</tr>

</table>

表单：（A,B,C,D,E）{

A表示采集数据范围：<form action="" method=""></form>

A1：action=（原意：行为，动作数据提交的路径）“” 服务器地址

A2：method（原意：方法方式数据提交的方式）=“get （获得获到） / post（邮递邮寄）”

Aa2：get/post区别：1.get方式提交的数据会出现在地址栏上方，安全性较低2.get方式可能获取的数据是浏览器里的缓存信息get方式提交的数据

B：input type="" name="" value=""：type类型按钮（B1,B2）输入框（B3,B4,B5,B6,）选中框（B7,B8）

B1：text：<input type="text">文本输入框

B2：password：<input type="password">密码框

B3：submit：<input type="submit">提交按钮

B4：reset：<input type="reset">重置按钮

B5：button：<input type="button">一般按钮（没有功能后续学习脚本可以赋予其功能）

B6：image：<input type="image" src="图片路径">图片按钮

B7：radio：<input type="radio" name="">单选框一组内name值必须一致

B8：checkbox：<input type="checkbox" name="">复选框

选中框附加(B7,B8）)：{b1：单选框复选框默认被选中 checked或checked="checked"

b2：<label>

<input type="checkbox">同意协议

b3：<input type="checkbox" id="值">

<labe for="id值">同意协议</labe>}

C：文本域（多行文本框）：也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。代码格式：＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞

D：下拉选择框

D1：<select>

</select>

D2：在option添加select可以是选项默认被选中

格式：<option value ="值"select="select" >选项</option>

E：按钮：

E1：<button>按钮</button>

E2：<button type="submit">提交按钮</button>

E3：<button type="reset">重置按钮</button>

}

其他：（F,G）

F：<div></div>

块元素

总是在新行上开始，占据一整行；

高度，行高以及外边距和内边距都可控制；

宽带始终是与浏览器宽度一样，与内容无关；

它可以容纳行内（内联）元素和其他块元素

G：<span></span>

行内元素和其他元素都在一行上；

高，行高及外边距和内边距部分可改变；

宽度只与内容有关；

行内元素只能容纳文本或者其他行内元素。

元素分类（H,J,K）

H：块元素：

display:block

1.<p></p>

<hr>

J：行内元素

display:inline

<b></b>

<i></i>

K：行内块

display:inline-block

<textarea></textarea>（文本框）

<select></select>（下拉选框）

<button></button>(普通按键)

特殊符号（L,M,N）

L：<小于号：&it；

M：>大于号： &gt；

N：空格：  &ensp; &emsp;

HTML大总结