HTML的正确入门姿势——基本结构与基本标签
2021-06-10 16:04
id="Label3" contentscore="17076"> 标签：像素 focus 协议 big 删除 入门 控件 1.2 下标 HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。 HTML文档主要包括三大部分：文档声明部分、 链接网页与其他文件。 下面举个栗子：链接小图标 HTML标签，分为“块级标签”和“行级标签”。 【块级标签和行级标签的区别】 1、块级标签自动换行，前后隔一行； 从写法上，HTML标签分为“成对标签”和“自闭合标签(空标签)” 1、h标签：标题标签，默认加粗，h1最大，h6最小 2、hr标签：水平线标签 3、br标签：换行标签，在代码中敲回车，在网页中并没有作用，必须使用 4、p标签：段落标签，表示网页中的一段文字 5、blockquote标签：引用标签，表示标签中的文字是应用自其他网站的内容。浏览器默认显示效果：整段向后缩进 6、cite：表示引用内容的来源，常写引用的网址URL。 7、pre标签：预格式标签，与p标签不同的是，pre标签会保留代码中的空格和回车，在网页中直接显示。最常的作用，是在网页中显示代码段，保留代码段格式。 8、div分区标签，用于配合css使用。将网页划分为块，可以包裹各种标签。DOCTYPE html> 1、有序列表ol： order list。一个有序列表由多个li组成 2、无序列表ul： unorder list 3、定义列表dl： difine list。 定义列表包含两部分： 包含两部分： 1、span标签：用于包裹行内的文字。常配合css使用修改文字样式。 ↓栗子：“帅”字颜色变红，字体变48像素 2、em/strong/i/b 区别 1、em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义。 【常见引用标签】 3、img图片标签 ①、src属性：表示图片所在的路径。 4、a标签：超链接 a、href属性：超链接跳转的地址。可以是网页链接，也可以是本地html文件的相对路径。 【功能性超链接】 5、字体大一号和小一号，已淘汰。修改字体统一使用css 【其他行级标签，了解即可】 【w3c倡导的web结构】 【w3c的规范】 表格table标签 【表格中的各种属性】 2、cellspacing:设置单元格与单元格之间的间距。 3、cellpadding:单元格内边距，单元格中文字与边框之间的距离。 4、width/height：表格的宽度 /高度 5、align：设置表格在浏览器中居左、居中、居右 6、Bgcolor：表格背景色 【表格的行列属性】 1、width/height：宽度/高度 2、bgcolor：背景色 3、align：设置表格中的文字水平对齐方式（right、center、left） 【注意】当表格属性与行列属性相冲突时，以行列属性为准 【表格的跨行与跨列】 代码如下： 【表格的结构化】 表格的直列化： 代码如下： 【form表单】 [get和post的区别] [get传递数据的URL格式] 2、input的常用属性： ③value：当前input的默认值； ⑤hidden：隐藏当前输入框。可以写为hidden="hidden",也可以省略属性值，只写 form表单 代码如下： 【html5智能表单】 HTML的正确入门姿势——基本结构与基本标签 标签：像素 focus 协议 big 删除 入门 控件 1.2 下标 原文地址：http://www.cnblogs.com/realsdg/p/7295535.html一、什么是HTML
二、HTML文档的结构
DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>我的第一个网页title>
head>
body>
body>
html>
三、HTML的基本标签
1.头部部分
1.1meta标签
meta charset="utf-8" />
meta name="keywords" content="杰瑞教育,html5,Web开发"/>
meta name="description" content="这是我在杰瑞开发的第一个网页。我真厉害！！！！！"/>
1.2title标签
title>杰瑞首页title>
1.3link标签
link rel="icon" href="img/icon.PNG"/>
2.主体部分
2.1 标签的分类
行级标签不会自动换行，从左往右依次显示
2、块级标签的宽度默认是百分之百，行级标签的宽度由文字内容撑开；
3、块级标签可以设置宽度、高度、边距等属性
行级标签不能设置上述属性
成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。例如：
自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合(/可以省略)。例如
2.2 常见的块级标签
断行。html>
head>
meta charset="UTF-8">
title>HTML基本标签title>
head>
body>
h1>我真帅！h1>
h2>我真帅！h2>
h3>我真帅！h3>
h4>我真帅！h4>
h5>我真帅！h5>
h6>我真帅！h6>
hr/>
p>这是一个段落。这是一个段落。br />这是一个段落。这
是一个段落。p>
p>这是一个段落。这是一个段落。这是一个段落。这是一个段
落。p>
blockquote cite="www.jredu100.com">
我是个帅哥 ！
blockquote>
pre>
预
格
式
标
签pre>
div style="width:100%;height:20px;background-color: red;">
这是div里面的文字
div>
2.3 基于布局的块级标签
ol>
li>第一项li>
li>第二项li>
li>第三项li>
ol>
ul>
li>第一项li>
li>第二项li>
li>第三项li>
ul>
：定义列表的描述项，相对于标题向后缩进显示，一个标题可以有多个描述项。
dl>
dt>定义列表的标题dt>
dd>定义列表的描述项1dd>
dd>定义列表的描述项2dd>
dd>定义列表的描述项3dd>
dl>
2.4 了解：组合标签figure
img 一张图片
figcaption： 图片的标题，在图片正下方显示。figure>
img src="img/icon.PNG" />
figcaption>图片的标题figcaption>
figure>
2.5 常用的行级标签
我真span style="color: red;font-size: 48px;">帅span>！！！
(强调的作用，可以让搜索引擎快速的抓取网页的重点部分。可以实现代码的语义化。)
2、em和strong都有强调的作用，但是em是倾斜，strong是加粗，而且strong的强调程度要比em更高。em>em标签，倾斜+强调em>
strong>strong标签，加粗+强调strong>
i>i标签，倾斜i>
b>b标签，加粗b>
s>删除线s>
u>u标签，下划线u>
常见的引用标签有：blockquoye、q、cite
区别：
1、显示效果上：blockquote整段缩进、q加引号、cite倾斜
2、从功能上：blockquote用于引用一整段内容，是块级标签。q引用一句话，是行级标签。cite常用于引用作品名、书画名。
[路径的表示方式]
a网络上的图片地址。不建议使用。 使用http：//协议
b可以使用图片的绝对路径。仅供了解。使用file：//协议。严禁使用。因为网页使用http协议，无法打开file：//协议的文件
绝对路径写法：file：///盘符：/文件路径
c使用相对路径。推荐使用的唯一方式。
a.图片在当前文件的下一层，“文件夹名/图片名(带后缀)”
b.图片与当前文件在同一层，直接写“图片名”。
c.图片在当前文件的上一层，“../图片名”。
注意：图片必须包含在项目里面，不能退出项目根目录
②、width、height(宽度、高度)属性。
③、title：鼠标指上时显示的文字。
④、alt：图片无法加载时显示的文字，省略alt将默认显示title内容。
⑤、align：图片周围的文字，相对于图片的排列方式：
top：文字居上
center：文字居中
bottom：文字居底img src="img/TX.JPG" width="100" height="100" title="鼠标指上时显示的文字" alt="" align="center"/>
b、target属性：超链接新页面打开的位置。
_self在当前页面打开(默认) _blank在新页面打开
c、title属性：鼠标指在超链接上显示的文字。
a、给指定邮箱发送邮件。mailto：//协议。写法：mailto：//邮箱地址
eg:点击给帅哥发邮件！
b、tencent：与指定QQ聊天。tencent：//协议。写法：tencent://message/?uin=QQ号码
eg:与帅哥聊天
c、锚链接：点击超链接可以跳转到页面的指定位置(锚点)
①在页面的指定位置定义一个锚点：
②将超链接的href属性，改为“#锚点名称”：跳转顶部
③跳转到其他页面锚点的方式：跳转到其他页面指定位置 a href="#top" target="_blank" title="百度">这是一个超链接a>
small>小一号字体small>
big>大一号字体big>
s标签：带删除线
u标签：带下划线
dfn标签：定义专业术语
abbr标签：专业术语缩写词
code：提示搜索引擎当前为一段计算机代码，但是不会保留代码格式，需要配合pre标签共同使用。pre包含code
var：声明变量
bdo：定义文本显示方向，有一个重要属性：dir， ltr从左往右 rtl从右往左
kbd：表示需要用户输入的文字
sub：下标
sup：上标
time：表示时间 u>u标签带下划线u>
span style="text-decoration: underline;">css实现下划线span>
s>s标签带删除线s>
span style="text-decoration: line-through;">css实现删除线span>
我们正在学习dfn>HTML5dfn>，简称为abbr>H5abbr>。
pre>
code>
jsLoader({
name : ‘iplookup‘,
url : ‘http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js‘
});
code>
pre>
var>xvar>+var>yvar>=1
bdo dir="rtl">我真帅bdo>
请输入“kbd>Esckbd>”退出系统。
Hsub>2sub>O Xsup>2sup>
现在是time>16:10time>
1、内容与表现分离。html与css分离
2、内容与行为分离。html与javascript分离
3、html代码，必须要实现语义化
1、标签名和属性名必须小写
2、html标签必须关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
①嵌套的标签，不能发生交叉
②块级标签可以包裹行级，行级标签不能包裹块级；p标签不能包裹p标签等...
2.6 表格
表格中的一行，用tr表示；
一行中的每个单元格，用td表示；
首行的表头中每个单元格用th表示，th默认文字会加粗，居中。
1、border：给表格的每个td和整个table加边框。如果border的值>1，则只有最外层边框加粗，td上的边框不变。
cellspacing="0"可以设置边框之间的间距为0，但是相邻的边框不会合并，而是显示两条线的宽度。
[设置表格边框合并]
可以使用css设置：style="border-collapse: collapse;"
设置边框合并以后，cellspacing属性将会失效。
bordercolor：表格的边框颜色
background：表格背景图。背景色和背景图同时存在，背景图生效。
作用于tr或td上的属性
当表格的属性与行列的属性发生冲突时，优先级采用“近者优先”的原则：table
Valign：设置表格中的文字垂直对齐方式（top、center、bottom）
（近者优先！！！）
table中的align控制表格在整个浏览器中的显示位置！
单元格中的align控制其中文字在单元格中的对齐方式！
表格的align属性并不影响单元格内文字的水平对齐方式！
tr的align属性可以控制一行中所有单元格的水平对齐方式！
1、跨列：colspan="n" 如果某个单元格跨n列，择该单元格右侧n-1个td就不需要了。
2、跨行：rowspan="n" 如果某个单元格跨n行，择该单元格下方n-1个td就不需要了。 table border="1"; cellspacing="0"; style="border-collapse: collapse;" cellpadding="10"
width="500"; height="400"; align="center"; Bbgcolor="yellow"; bordercolor="red";
background="img/TX.JPG"; >
tr bgcolor="red">
th width="300"; bgcolor="cyan"; align="right"; valign="top"; rowspan="3">1-1th>
th colspan="3">1-2th>
tr>
tr>
td>2-2td>
td>2-3td>
td>2-4td>
tr>
tr>
td>3-2td>
td>3-3td>
td>3-4td>
tr>
table>
完整的表格结构，包括
caption：表格的标题，无论caption标签放在表格的第几行，表格标题永远在表格的正上方居中
thead：表格的表头部分。永远在表格最上部
tbody：表格的身体部分。永远在表格的thead之下，tfoot之上
tfoot：表格的尾部。永远在表格的最下部。
表格有几列，就可以在表格的最上方写几个
添加name等属性，表示这一列的所有td同步修改；
如果，需要对多列修改共同样式，可以使用 table>
col style="background-color: red;"/>
colgroup style="background-color: blue;"/>
col />
col />
caption>表格的标题caption>
thead>
tr>
th>序号th>
th>姓名th>
th>性别th>
tr>
thead>
tbody>
tr>
td>1td>
td>张三td>
td>男td>
tr>
tr>
td>2td>
td>李四td>
td>女td>
tr>
tr>
td>3td>
td>王二td>
td>不明td>
tr>
tbody>
tfoot>
tr>
td>合计td>
td>td>
td>3td>
tr>
tfoot>
table>
2.7 表单
1、form表单有两个重要的属性
action：表示将表单提交给哪个服务器地址。
method：表单提交数据的方式，可选值有get、post两种。
①get使用url传递数据，所有内容在地址栏可见，不安全。
post的数据无法在地址栏看到，较安全。
②get传递的数据量有限，而且只能传递纯文字内容；
post可以传递大量数据，并且可以传递图片、视频等文件。
③get的传输速度要比post快。
http：//原来的地址.html？name1=value1&name2=value2
比如：http：//127.0.0.1:8020/0595.html?username=123
所以，input使用时，name属性必不可少，缺少name，将导致该输入框的数据不向后台传递。
①type：表示当前输入框是何种类型的输入框；
②name：给输入框起别名。向后台传递时，使用name=value的形式传递。
④placeholder：输入框的提示内容，当输入框有value时提示内容消失。
隐藏的输入框依然可以向后台传递数据
⑥disabled：禁用当前输入框。可以显示，不能使用。
被禁用的输入框内容，将不能向后台传递数据。
⑦ checked="checked" 设置单选/多选按钮，默认选中。
3、input的type类型：
①text：普通的文本框；
②password：密码框输入的内容，显示为小黑点。
③radio：单选按钮，单选按钮的value不能省略，这个value需要传到后台；
单选按钮，凭借name是否相同，区分按钮是否为同一组。同一组按钮只能选中一个，name必须相同。
checked="checked" 设置单选按钮，默认被选中。
④checkbox：多选按钮，其他与单选按钮相同。
⑤file：文件上传框。
accept属性可以限制只能上传何种类型的文件。"*"表示可以接受所有文件，"image/*"表示只能接受图片。
multiple="multiple" 设置可以上传多个文件。
⑥submit：表单提交按钮
⑦reset：表单重置按钮，点击将表单恢复为初始状态。
⑧image：图形提交按钮，src属性导入图片，与submit都具有提交表单的作用。
⑨button：显示为按钮形状，但是没有任何作用。
⑩hidden：隐藏的输入框，与 普通输入框+hidden="hidden" 的作用相同。
4、select 下拉选择区块
①select里面的每一项，用标签表示；
②name属性，需要写到select标签上；
③option标签如果有value属性，择向后台传递的将是value属性的值，
如果没有value属性，则传递的是标签之间的文字。
④option添加属性中，selected="selected"设置选中默认项
⑤select添加属性multiple="multiple",设置当前下拉控件可以多选。
⑥option添加属性title，表示鼠标指上后的文字。
⑦select可以使用标签对选项进行分组，用label属性显示分组名 select name="city">
optgroup label="沿海">
option value="123">青岛option>
option selected="selected">烟台option>
optgroup>
optgroup label="内地">
option title="济南">济南option>
option>淄博option>
optgroup>
select>
5、textarea 文本域
①文本域大小控制：
可以用文本域属性cols="20"(宽度多少字符) rows="20"（高度等于多少行）
可以使用css样式style="width: 200px; height: 300px;"
②设置文本域大小不能拖动 style="resize：none;"
③设置文本域为只读模式，不能修改
④文字超出区域处理：
使用style="overflow: xx"样式，可以设置文字超出区域的显示的方式:
>>>overflow:hidden; 超出区域的文字隐藏不显示；
>>>overflow: scroll:无论文字多少，都会显示水平垂直滚动条；
>>>overflow: auto：自动，默认效果。文字多显示滚动条，文字少不显示滚动条
>>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条。
overflow-x: scroll;overflow-y: hidden; form action="" method="get" id="form1">
table>
tr>
td>用户名td>
td>
input type="text" name="username" value="sdg"
disabled/>
input type="text" name="username" value="sdg"
hidden="hidden"/>
td>
tr>
tr>
td>密码td>
td>
input type="password" name="password" value="" placeholder="请输入密码"/>
td>
tr>
tr>
td>性别td>
td>
input type="radio" name="sex" value="男" />男
input type="radio" name="sex" value="女" />女
input type="radio" name="sex" value="不明" checked="checked" />不明
td>
tr>
tr>
td>兴趣td>
td>
input type="checkbox" name="hobby" value="吃" />吃
input type="checkbox" name="hobby" value="喝" />喝
input type="checkbox" name="hobby" value="玩" />玩
input type="checkbox" name="hobby" value="乐" />乐
td>
tr>
tr>
td>身份证td>
td>
input type="file" name="card" accept="image/*" multiple="multiple"/>
td>
tr>
tr>
td>城市td>
td>
select name="city">
optgroup label="沿海">
option value="123">青岛option>
option selected="selected">烟台option>
optgroup>
optgroup label="内地">
option title="济南">济南option>
option>淄博option>
optgroup>
select>
td>
tr>
tr>
td>阅读服务协议：td>
tr>
tr>
td colspan="2">
textarea style="width: 300px; height: 200px; resize: none; overflow: scroll;"
readonly="readonly">这是一份你必须同意的协议textarea>
td>
tr>
tr>
td>
input type="submit" value="注册"/>
td>
td>
input type="reset" name="重置"/>
td>
tr>
tr>
td>
input type="image" src="img/icon.PNG"/>
td>
td>
input type="button" value="一个并没有什么卵用的按钮"/>
td>
tr>
table>
form>
1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id，
然后给表单外面的input添加form属性，指向这个id，就可以实现表单与input的绑定
2\H5给我们新增了许多input的新的type类型
range color date email url等
3、H5新增的input属性：
①form属性：关联指定表单的id
②placeholder：输入框的提示内容
③required="required" 表示必填
④autofocus： 指定输入框自动获得焦点
⑤autocomplete：可以设置是否开启自动提示完成功能，默认 为开启状态，
设置为off表示关闭，设置为on表示打开
可以为form标签设置autocomplete，控制表单所有输入框的自动提示功能。