HTML学习

weixin_52089751

已于 2022-07-09 22:07:36 修改

阅读量67

点赞数

文章标签：前端 javascript 开发语言

于 2022-06-23 18:12:02 首次发布

本文链接：https://blog.csdn.net/weixin_52089751/article/details/125423484

版权

HTML 学习
一、概述
二、行内元素
三、块级元素
四、行内块元素

HTML 学习

关于HTML的基本概念和HTML元素

一、概述

1.HTML是什么

超文本标记语言：Hyper Text Markup Language
对网页实现特殊效果，运行在浏览器上的标记语言。
是一种可解释的语言：不检查错误，使用浏览器调试找错误

2.HTML页面标准结构

用！+tab 键出来HTML默认结构

<!DOCTYPE>;  <!-- 文档类型声明 -->
<html>
	<head>
		<meta charset="utf-8" />  <!-- 元数据，定义页面的编码格式、缓存、搜索关键字等 -->
		<title>HTML标准格式</title>
	</head>
	<body>
		<h1/>
		<p/>
		<img src="" >  <br>
		<input type="text" value="输入框"> <br>
		<button type="submit" > 按钮</button>
	</body>
</html>

// An highlighted block
<!DOCTYPE>;  <!-- 文档类型声明 -->
<html>
	<head>
		<meta charset="utf-8" />  <!-- 元数据，定义页面的编码格式、缓存、搜索关键字等 -->
		<title>HTML标准格式</title>
	</head>
	<body>
		<h1/>
		<p/>
		<img src="" >  <br>
		<input type="text" value="输入框"> <br>
		<button type="submit" > 按钮</button>
	</body>
</html>

3.注意格式

不区分大小写区分中英文字符
空格折叠：多个空格只能显示一个
用Tab缩进
用字符实体代替特定意义的字符、键盘无法录入的字符

二、行内元素

1.常见标签 span a i em b strong lable code

1. span: 文档中的节<span

2. 超链接 a: <a href=“url” target=" " 点击的内容 </a

_self	当前页面跳转（默认）
_blank	新窗口打开
_parent	父窗口中打开
_top	在当前窗体打开链接，替换当前整个窗体

锚点精准跳转到文章指定位置
默认有下划线

3. 倾斜 i: 自定义图标 em: 语义强调

4. 加粗 b：strong：更强调语义

5. 代码文本 code

6. lable

2.作用

加强内容显示，控制细节。

3.特点

不独占一行
宽度是文字的宽度，不可控制
高度是顶部和底部的边距，不可控制

三、块级元素

1.常见标签 div p h ol ul hr table form pre noscript

1. div

2. p

3. h 只有6个

4. ol 有序列表

<ol type='a'> <!-- 使得前边数字变为字母 -->
	<li> H</li>
	<li> T</li>
	<li> M</li>
	<li> L</li>
</ol>

5. ul 无序列表

6. hr 单标签标记

7. table

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

在这里插入图片描述

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

在这里插入图片描述

caption	表格标题
colspan	合并列
rowspan	合并行
cellpadding	单元格内容和其边框
cellspacing	单元格之间的距离
align	水平方向上对齐 left right center
valign	垂直方向上对齐 top bottom middle

8. from

<form action="" method="">
First name: <input type="" name="" value="" checked=""><br>
</form>

1.action 提交路径

2.method 表单数据提交方式

get 默认值，表单数据附加在action 属性的 url中，以？为分隔符。
用于不敏感信息、容纳字符有限。
post 表单数据包含在表体内发送给服务器。
用于不敏感信息。

3.type

text	普通文本
textarea	多行文本框	rows行 cols列
password	密码框
submit	提交
radio	单选	checked=“checked” name需相同
checkbox	多选	checked=“checked” name需相同
button	普通按钮
reset	重置按钮
file	文件域
image	图片
date	日期
email	邮箱

4.name

5.value

6.下拉框

selected 表示预选
默认下拉为单行 size 定义下拉的行数
multiple 定义多选

<form action="">
<select name="cars">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="fiat" selected>Fiat</option>
	<option value="audi">Audi</option>
</select>
</form>