HTML结构

body内常用标签

常用

div与span

img

a标签超链接标签

其他格式标签

列表

表格

表单

select标签

label标签

textarea多行文本

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>HTML结构</title>
</head>
<body></body>
</html>

通常编辑器输入！，在按Enter或tab能xia显示（vs code和pycharm）

body内常用标签

常用

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s><p>段落标签</p><h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6><!--换行-->
<br><!--水平线--><hr>

div与span

<div>标签用来定义一个块级元素，并无实际的意义</div>
<div>主要通过CSS样式为其赋予不同的表现</div>
<span>span标签用来定义内联(行内)元素，并无实际的意义</span><span>主要通过CSS样式为其赋予不同的表现</span>

img

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<a href="http://www.taobo.com" target="_blank" >点我</a>

target：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

其他格式标签

列表

1.无序列表

<ul type="disc"><li>第一项</li><li>第二项</li>
</ul>

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

2.有序列表

<ol type="1" start="2"><li>第一项</li><li>第二项</li>
</ol>

type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

3.标题列表

<dl><dt>标题1</dt><dd>内容1</dd><dt>标题2</dt><dd>内容1</dd><dd>内容2</dd>
</dl>

结果为

表格

<table><thead><tr><th>序号</th><th>姓名</th><th>爱好</th></tr></thead><tbody><tr><td>1</td><td>Egon</td><td>杠娘</td></tr><tr><td>2</td><td>Yuan</td><td>日天</td></tr></tbody>
</table>

属性:

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

表单

<form action="form_action.asp" method="get"><p>First name: <input type="text" name="fname" /></p><p>Last name: <input type="text" name="lname" /></p><input type="submit" value="Submit" />
</form>

input

<input> 元素会根据不同的 type 属性，变化为多种形态。

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

select标签

<form action="" method="post"><select name="city" id="city"><option value="1">北京</option><option selected="selected" value="2">上海</option><option value="3">广州</option><option value="4">深圳</option></select>
</form>

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。

<form action=""><label for="username">用户名</label><input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">默认内容
</textarea>

属性说明：

name：名称
rows：行数
cols：列数
disabled：禁用

摘抄自：https://www.cnblogs.com/liwenzhou/p/7988087.html

01.HTML基础命令笔记相关推荐

linux基础命令怎么记,linux基础命令--笔记(示例代码)
linux基础命令--笔记一. 1 . --help 命令简单帮助 2. man 查看命令复杂帮助 (非内置命令) 3 . help (bash的内置命令)如 :help cd .hel ...
Python 基础学习笔记 03
Python基础系列 Python 基础学习笔记 01 Python 基础学习笔记 02 Python 基础学习笔记 03 Python 基础学习笔记 04 Python 基础学习笔记 05 文章目录 ...
Maven-学习笔记01【基础-Maven基本概念】
Java后端学习路线笔记汇总表[黑马程序员] 黑马程序员(腾讯微云)Maven基础讲义.pdf Maven-学习笔记01[基础-Maven基本概念] Maven-学习笔记02[基础-Maven的安 ...
JQuery-学习笔记01【基础——JQuery基础】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
linux基础命令学习笔记（二）
linux基础命令学习笔记(二) 1.kill :终止进程 kill pid (唯一标示一个进程) kill -9 强制终止 kill -15 命令未结束不能终止 # ps aux 查看所有进程 ...
redis基础命令和数据操作命令学习笔记
redis基础命令和数据操作命令学习笔记基础命令安装成功后,redis的启动命令:先修改配置文件.将服务改成默认运行.然后以配置文件启动服务 redis-server config/redis-c ...
linux 操作系统笔记基础命令
文章目录 linux 基础命令 cd 命令详解 ls 命令详解 pwd 命令详解 hostname命令详解 clear命令详解 who.whoami.w 命令 which 命令 cal 命令详解 ld ...
【笔记】网易微专业-Web安全工程师-01.WEB基础知识
课程概述: 本课是基础中的基础,通俗易懂的讲解了Web的本质和Web开发的基础知识.对于Web小白,建议从头开始抓紧学习:对于已经有一定Web基础知识的同学,建议快速的过一遍,夯实基础. 课程大纲: ...

01.HTML基础命令笔记

HTML结构

body内常用标签

常用

div与span

img

a标签超链接标签

其他格式标签

列表

表格

表单

select标签

label标签

textarea多行文本

01.HTML基础命令笔记相关推荐

最新文章

热门文章

01.HTML基础命令笔记

HTML结构

body内常用标签

常用

div与span

img

a标签 超链接标签

其他格式标签

列表

表格

表单

select标签

label标签

textarea多行文本

01.HTML基础命令笔记相关推荐

最新文章

热门文章

a标签超链接标签