来自 软件资讯 2019-12-06 22:27 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

基本结构与基本标签

一、什么是HTML

    HTML是超文本标签语言,即网页的源码。而浏览器就是翻译解释HTML源码的工具。

二、HTML文书档案的组织

    HTML文档首要富含三大片段:文书档案评释部分、<head>尾部部分、<body>主体部分。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的第一个网页</title>
    </head>
    <body>
    </body>
</html>

<!--
↑文书档案类型证明:让浏览器根据html5的正统对代码举行讲授与施行。
↑文书档案类型证明不可贫乏,况且,必需放在文书档案最上方。
↑假如不写文书档案类型注明,浏览器会默许依据包容方式运作,但可能会并发不明bug。
-->

三、HTML的主干标签

1.<head>尾部部分

<!--
↑head中首要放关于网页设置的相干语句。
-->


1.1meta标签

<meta charset="utf-8" />

<!--
↑设置网页的字符集编码格式:
GB2312:国家规范码。简体汉语的编码格式。
GBK:扩大的国家标准码。比国家标准吗多了越来越多的编码格式。
utf-8;万国码。能够协作绝大超级多国家的语言。

html4.01事情未发生前,注明字符集编码的格式:<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

-->

<meta name="keywords" content="杰瑞教育,html5,Web开发"/>

<!--
设置网页根本字:
name="keywords"表示近年来说话用于安装网页根本字
content=""表示网页的至关重大字内容。多少个至关心珍视要字以内用西班牙语逗号分隔。
-->

<meta name="description" content="这是我在杰瑞开发的第一个网页。我真厉害!!!!!"/>

<!--
设置网页描述:
name="description" 表示如今说话用于安装网页描述
content="" 表示网页的描述内容。
网页的叙述,在找出引擎中找出网址时,标题上边包车型客车风度翩翩段文字,正是网页的陈说内容。
-->


1.2title标签

<title>杰瑞首页</title>

<!--
↓网页的标题,也便是网页选项卡上的文字。
-->


1.3link标签

链接网页与任何文件。

上边举个栗子:链接小Logo

<link rel="icon" href="img/icon.PNG"/>

2.<body>主体部分

<!--
body中的内容,会来得在浏览器的显示区域中。
-->


2.1 标签的归类

HTML标签,分为“块级标签”和“行级标签”。

【块级标签和行级标签的界别】

1、块级标签自动换行,前后隔一行;
行级标签不会活动换行,从左往右依次展现
2、块级标签的大幅默许是全体,行级标签的增长幅度由文字内容撑开;
3、块级标签可以安装宽度、中度、边距等属性
行级标签不能设置上述天性

从写法上,HTML标签分为“成对标签”和“自闭合标签(空标签卡塔尔国”
成对标签:成对现身,有起头标签,必需有收尾标签,内容包裹在七个标签之间。举个例子:<h1></h1> <p></p> <title></title>
自闭合标签/空标签:独有贰个标签,用/表示标签的自行关闭(/能够轻便卡塔尔国。举个例子<hr /> <link /> <meta />


2.2 不足为道的块级标签

1、h标签:标题的签,暗中同意加粗,h1最大,h6最小

2、hr标签:水平线标签

3、br标签:换行标签,在代码中敲回车,在网页中并未意义,必需使用<br>断行。

4、p标签:段落标签,表示网页中的黄金年代段文字

5、blockquote标签:援引标签,表示标签中的文字是使用自其余网站的内容。浏览器默许展现效果:整段向后缩进

6、cite:表示援用内容的源于,常写援用的网站U路虎极光L。

7、pre标签:预格式标签,与p标签不一样的是,pre标签会保留代码中的空格和回车,在网页中央市直机关接展现。最常的成效,是在网页中展现代码段,保留代码段格式。

8、div分区标签,用于合作css使用。将网页划分为块,能够打包各类标签。<!DOCTYPE html>

<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 基于布局的块级标签

1、有类别表ol: order list。一个稳步列表由八个li组成

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

2、冬日列表ul: unorder list

<ul>
                <li>第一项</li>
                <li>第二项</li>
                <li>第三项</li>
            </ul>

3、定义列表dl: difine list。

概念列表包括两有个别:
<dt></dt>:定义列表的标题,标题顶格彰显,平时三个概念列表独有叁个题名
<dd></dd>:定义列表的描述项,相对于标题向后缩进突显,叁个题名能够有三个描述项。

<dl>
    <dt>定义列表的标题</dt>
    <dd>定义列表的描述项1</dd>
    <dd>定义列表的描述项2</dd>
    <dd>定义列表的描述项3</dd>
</dl>

2.4 掌握:组合标签figure

包涵两有的:
img 一张图片
figcaption: 图片的标题,在图纸正下方展现。

<figure>
    <img src="img/icon.PNG" />
    <figcaption>图片的标题</figcaption>
</figure>

2.5 常用的行级标签

1、span标签:用于包裹行内的文字。常同盟css使用矫正文字样式。

↓栗子:“帅”字颜色变红,字体变48像素

我真帅!!!

2、em/strong/i/b 区别

1、em和i都能偏斜,strong和b都能加粗。可是,em和strong多了意气风发层重申的含义。
(重申的效果与利益,能够让追寻引擎快速的抓取网页的最首要部分。可以实今世码的语义化。)
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常用于引用小说名、书法和绘画名。

 

3、img图片标签

①、src属性:表示图片所在的路子。
  [路子的象征方法]
  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="图片 1" align="center"/>

4、a标签:超链接

a、href属性:超链接跳转的地址。能够是网页链接,也足以是地点html文件的相对路线。
b、target属性:超链接新页面张开的职位。
  _self在那时此刻页面张开(暗中认可卡塔尔(قطر‎ _blank在新页面张开
c、title属性:鼠标指在超链接上出示的文字。

【作用性超链接】
a、给钦命邮箱发送邮件。mailto://左券。写法:mailto://邮箱地址
   eg:<a href="mailto://983364230@qq.com">点击给潮男发邮件!</a>
b、tencent:与指定QQ聊天。tencent://协议。写法:tencent://message/?uin=QQ号码
  eg:<a href="tencent://message/?uin=983364230">与潮男聊天</a>
c、锚链接:点击超链接能够跳转到页面包车型客车钦命地方(锚点卡塔尔(英语:State of Qatar)
  ①在页面的钦定地方定义一个锚点:<a name="top"></a>
  ②将超链接的href属性,改为“#锚点名称”:<a href="#top">跳转最上端</a>
  ③跳转到其余页面锚点的法子:<a href="其他页面地址.html#锚点名称">跳转到其余页面内定地方</a>

 <a href="#top" target="_blank" title="百度">这是一个超链接</a>

5、字体大学一年级号和小生龙活虎号,已淘汰。改正字体统一选择css

<small>小一号字体</small>
 <big>大一号字体</big>

 

【其他行级标签,驾驭就可以】
s标签:带删除线
u标签:失眠划线
dfn标签:定义专门的学问术语
abbr标签:职业术语缩写词
code:提示寻找引擎当前为后生可畏段Computer代码,不过不会保留代码格式,须求卓殊pre标签协作选用。pre包括code
var:评释变量
bdo:定义文本呈现方向,有三个主要性质:dir, ltr从左往右 rtl从右往左
kbd:表示需求客商输入的文字
sub:下标
sup:上标
time:表示时间

        <u>u标签带下划线</u> 
        css实现下划线

        <s>s标签带删除线</s>
        css实现删除线

        我们正在学习<dfn>HTML5</dfn>,简称为<abbr>H5</abbr>。

        <pre>
        <code>
jsLoader({
    name : 'iplookup',
    url : 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'
});
        </code>
        </pre>

        <var>x</var>+<var>y</var>=1

        <bdo dir="rtl">我真帅</bdo>

        请输入“<kbd>Esc</kbd>”退出系统。

        H<sub>2</sub>O   X<sup>2</sup>

        现在是<time>16:10</time>                

 


 

【w3c倡导的web结构】
1、内容与表现抽离。html与css分离
2、内容与表现分开。html与javascript分离
3、html代码,应当要落到实处语义化

【w3c的规范】
1、标具名和性质名必需小写
2、html标签必需关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
①嵌套的竹签,不能发出交叉
②块级标签能够打包行级,行级标签不可能包裹块级;p标签不能够包裹p标签等...


 

2.6 表格

表格table标签
报表中的大器晚成行,用tr表示;
朝气蓬勃行中的每种单元格,用td表示;
首行的表头中各种单元格用th表示,th私下认可文字会加粗,居中。

【表格中的各个性能】
1、border:给表格的各种td和全部table加边框。假使border的值>1,则独有最外层边框加粗,td上的边框不改变。

2、cellspacing:设置单元格与单元格之间的间隔。
  cellspacing="0"能够设置边框之间的间隔为0,不过相邻的边框不会合併,而是浮现两条线的宽窄。
[安装表格边框合併]
能够利用css设置:style="border-collapse: collapse;"
设置边框归一句话来讲后,cellspacing属性将会失效。

3、cellpadding:单元格内边距,单元格中文字与边框之间的间隔。

4、width/height:表格的宽度 /中度

5、align:设置表格在浏览器中居左、居中、居右

6、Bgcolor:表格背景象
  bordercolor:表格的边框颜色
  background:表格背景图。背景观和背景图同不时候设有,背景图生效。

【表格的体系属性】
功用于tr或td上的属性

1、width/height:宽度/高度

2、bgcolor:背景色
当表格的习性与行列的习性发生冲突时,优先级应用“近者优先”的基准:table<tr<td

3、align:设置表格中的文字水平对齐方式(right、center、left)
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-1</th>
                <th colspan="3">1-2</th>

            </tr>
            <tr>

                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
            </tr>
            <tr>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
            </tr>
        </table>

【表格的布局化】
总体的表格构造,富含
caption:表格的标题,无论caption标签放在表格的第几行,表格标题永世在表格的正上方居中
thead:表格的表底部分。永世在表格最上部
tbody:表格的身躯有个别。恒久在报表的thead之下,tfoot之上
tfoot:表格的尾巴。永恒在报表的最下边。

报表的直列化:
报表有几列,就能够在表格的最最上端写多少个<col />标签,每一种<col />就对应着第几列,能够对<col />标签改革样式、
加多name等本性,表示这一列的保有td同步更正;
设若,供给对多列修改协同样式,能够应用<colgroup></colgroup>包裹多少个<col />

 

代码如下:

     <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>1</td>
                    <td>张三</td>
                    <td>男</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>女</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王二</td>
                    <td>不明</td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td>合计</td>
                    <td></td>
                    <td>3</td>
                </tr>
            </tfoot>
        </table>

 

2.7 表单

【form表单】
1、form表单有七个重大的属性
  action:表示将表单提交给哪个服务器地址。
  method:表单提交数据的不二等秘书诀,可选值有get、post二种。

[get和post的区别]
  ①get使用url传递数据,全体内容在地方栏可以预知,不安全。
      post的多少无法在地址栏见到,较安全。
  ②get传递的数据量有限,并且一定要传递纯文字内容;
           post能够传递多量数额,而且能够传递图片、录制等文件。
  ③get的传输速度要比post快。

[get传递数据的U大切诺基L格式]
http://原本的地址.html?name1=value1&name2=value2
比如:http://127.0.0.1:8020/0595.html?username=123
因而,input使用时,name属性不能缺少,缺乏name,将招致该输入框的多少不向后台传递。

2、input的常用属性:
  ①type:表示如今输入框是何类别型的输入框;
  ②name:给输入框起别称。向后台传递时,使用name=value的款式传递。

  ③value:当前input的私下认可值;
  ④placeholder:输入框的提醒内容,当输入框有value时提醒内容未有。

  ⑤hidden:蒙蔽当前输入框。能够写为hidden="hidden",也得以轻松属性值,只写<input type="text" hidden>
    掩瞒的输入框依旧可以向后台传递数据
  ⑥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内部的每生龙活虎项,用<option></option>标签表示;
  ②name属性,须要写到select标签上;
  ③option标签假使有value属性,择向后台传递的将是value属性的值,
    若无value属性,则传递的是<option></option>标签之间的文字。
  ④option增添属性中,selected="selected"设置选中暗许项
  ⑤select增添属性multiple="multiple",设置当前下拉控件可以多选。
  ⑥option增多属性title,表示鼠标指上后的文字。
  ⑦select能够选用<optgroup></optgroup>标签对选拔实行分组,用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;"
  ③设置文本域为只读情势,无法修改
    <textarea readnoly="readonly"></textarea>
  ④文字超过区域管理:
    使用style="overflow: xx"样式,能够安装文字超过区域的来得的不二诀窍:
    >>>overflow:hidden; 超过区域的文字掩瞒不显得;
    >>>overflow: scroll:无杂谈字多少,都交易会示档期的顺序垂直滚动条;
    >>>overflow: auto:自动,暗中认可效果。文字多展现滚动条,文字少不显示滚动条
    >>>能够选择overflow-x和overflow-y单独校订四个样子的滚动条。
    overflow-x: scroll;overflow-y: hidden;

form表单 代码如下:

    <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>

【html5智能表单】
1、H5给咱们提供了将form外的input与表单关联的办法。只要求给form表单起三个id,
  然后给表单外面包车型客车input增多form属性,指向那个id,就足以兑现表单与input的绑定
  <form id="ff"></form>
  <input form="ff"/>
2H5给大家新添了重重input的新的type类型
  range color date email url等
3、H5新增的input属性:
  ①form属性:关联钦定表单的id
  ②placeholder:输入框的唤起内容
  ③required="required" 表示必填
  ④autofocus: 钦点输入框自动获取主旨
  ⑤autocomplete:可以安装是不是展开自动提示到位功用,暗许 为展开状态,
  设置为off表示关闭,设置为on表示展开
  可认为form标签设置autocomplete,调节表单全部输入框的全自动提示效果。

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:基本结构与基本标签

关键词: