HTML
1、HTML标签
HTML通过标签(元素)成对出现来定义文本、图像、链接等。标签是由尖括号包围的关键字。
<p>这是一个段落。</p>
<h>这是一个标题。</h>
<a href="#">这是一个超链接。</a>
除了双标签,也存在单标签:
<input type="text">
<br>
<hr>
区别:单标签用于没有内容的元素,双标签用于有内容的元素
2、HTML文件结构
<!DOCTYPE html>#!放置文档原信息,注意!要用英文书写再按Tab
<html lang="en">#HTML文档的起始点,和下面html标签对呼应
<head>#包含文件原信息,如标题、css、jss等
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
html可以有6个级别的h
<b>加粗标签
<i>斜体标签
<u>划线标签
<s>删除线标签
<ul>无序列表
<ul>
<li>无序列表元素<li>
</ul>
<ol>有序列表</ol>
<table border="1">表格,border是表格边框的宽度
<table>
<tr>行标签table row
<td>列标签table data
<th>列标题</th>
</td>
</tr>
</table>
3、HTML属性
定义元素的外观和行为,以及与其他元素的关系
基本语法:
<开始标签 属性名="属性值">
每个HTML元素可以具有不同的属性
<p id="describe" class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>
属性名不区分大小写,属性值对大小写敏感
<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">
前两者相同,第三者和前两个不一样
class 为hmtl元素定义一个或多个类名(类名从文件样式引入)
id 定义元素唯一的id
style 规定元素的行内样式
<a href="https://baidu.com" target="_blank">在新标签页打开超链接</a>
<br>或<hr>换行标签
<img src="example.jpg" alt="" width="" height="">设置图片宽高
4、HTML区块-块元素和行内元素
块元素:组织和布局页面的主要结构和内容
<div></div>创建一个可以包含其他HTML的容器块,仅用于组织内容。如导航栏、侧边栏、内容区域
<p></p>
<h1>到<h6>
<u1>
<ol></ol>
<li>
<table></table>
<form></form>
行内元素:添加文本样式或为文本中的一部分应用样式
<span>包装以便使用css等行为
<a>
<strong></strong>加粗
<em></em>斜体
<img src="">
<br>换行
<input type="" name="">
5、HTML表单
(1)<form>标签:表单的容器
<form></form>
<input type="" placeholder="请输入内容">
type值的属性:
值 描述
button 定义可点击的按钮(主要与 JavaScript 一起使用以激活脚本)。
checkbox定义复选框。
color 定义颜色选择器(拾色器)。
date 定义日期控件(年月日,无时间)。
datetime-local 定义日期和时间控件(年、月、日、时间,无时区)。
email 定义用于输入电子邮件地址的字段。
file 定义文件选择字段和“浏览”按钮(用于文件上传)。
hidden 定义隐藏的输入字段。
image 定义图像作为提交按钮。
month 定义月份和年份控件(无时区)。
number 定义用于输入数字的字段。
password定义密码字段。
radio 定义单选按钮。
range 定义范围控件(如滑块控件)。
reset 定义重置按钮。
search 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
tel 定义用于输入电话号码的字段。
text 默认。定义单行文本字段。
time 定义输入时间的控件(无时区)。
url 定义用于输入 URL 的字段。
week 定义周和年控件(无时区)。
type元素规定了input元素的类型
input属性:https://www.w3school.com.cn/tags/tag_input.asp
(2)<span>输入内容文本框前的label
(3)HTML所有标签查询
https://www.w3school.com.cn/tags/tag_comment.asp
HTML学习笔记4-总结
于 2024-03-06 14:47:28 首次发布