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

跨职业学习编制程序的苦逼生活,html5常用竹签

一串串小小的代码,竟然可以做出辣么多的东西,彻底颠覆了我的世界观、人生观、价值观。

html5常用基本标签,html5常用标签

话不多说,一个例子证明一切>>>>

一、Html的基本结构:

<!DOCTYPE html> <html> <head> <meta  charset=utf-8"> <title></title> </head> <body> 网页的文本、图片等信息; </body> </html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .li{
                text-align: right;
            }
        </style>
    </head>
    <body>
        <form action=""method="get">
        <div style="width: 555px;height:30px;background-color: #E8E8E9;">
            <img src="img/xiaotu.png" align="center"style="margin-bottom: 3px;"/>
            <b style="font-size: 12px;line-height: 30px;">用户注册</b>
        </div>
        <div>
            <table>
                <tr>
                    <td class="li">用户名:</td>
                    <td>
                        <input type="text" name="name" />*
                    </td>
                    <td>检测是否有相同的用户名</td>
                    <td></td>
                </tr>
                <tr>
                    <td class="li">密码:</td>
                    <td>
                        <input type="password"name="psw" />
                    </td>
                    <td>
                        至少6位
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        真实姓名:
                    </td>
                    <td><input type="text" name="relname" /></td>
                </tr>
                <tr>
                    <td class="li">确认密码:</td>
                    <td><input type="password" name="psw2"  /></td>
                    <td align="right">性别:</td>
                    <td><select name="sex">
                        <option >男</option>
                        <option >女</option>
                    </select></td>
                </tr>
                <tr>
                    <td class="li">证件类型:</td>
                    <td>
                        <select name="card" style="width: 150px;height: 25px;">
                            <option>身份证</option>
                        </select>
                    </td>
                    <td align="right">出生日期:</td>
                    <td><input type="date" name="data" />(格式为2013-2-7)</td>
                </tr>
                <tr>
                    <td class="li">证件号码:</td>
                    <td><input type="text" name="num" /></td>
                    <td align="right">国家:</td>
                    <td><input type="text" name="country" /></td>
                </tr>
                <tr>
                    <td class="li">联系号码:</td>
                    <td><input type="tel" name="tel"/></td>
                    <td align="right">城市:</td>
                    <td><input type="text" name="city" /></td>
                </tr>
                <tr>
                    <td class="li">手机号码:</td>
                    <td><input type="tel" name="phone"  /></td>
                    <td style="font-size: 12px;color: darkgray;">建议填写以便短信进行通知</td>
                </tr>
                <tr>
                    <td class="li">Email:</td>
                    <td><input type="email" name="mail"  /></td>
                    <td align="right">邮编:</td>
                    <td><input type="email" name="ad"  /></td>
                </tr>
                <tr>
                    <td class="li">联系地址:</td>
                    <td colspan="3"><input type="text" name="adr"style="width: 450px;"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2"align="center"height="50px">
                        <input type="reset" value="重置" style="border: none;border-radius: 8px;"/>
                        <input type="submit" value="注册" style="background-color:#A51313;border: none;border-radius: 8px;margin-left: 10px;color: white;"/>
                    </td>

                </tr>

            </table>

        </div>
        <div id=""style="margin-left: 100px;">
                    广告|
                    <sapn style="color: #579FFB;font-size: 12px;">伙伴云表格,三分钟上手,永久免费!</sapn>查看详情

                </div>
        </form>
    </body>
</html>

 二、Head部分:用于表示网页的元数据即描述网页的基本信息

 

其常用标签及属性有:

1、title标签:浏览器标签页显示的标题 2、meta标签:其常用属性 ①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:<meta charset="UTF-8"> 常见的字符集编码格式: a.GB-2312:国标码,简体中文 b.GBK:扩展的国标码 c.UTF-8:万国码 Unicode 常用 ②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中) ③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看 常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。 3、link标签:链接网页图标(title前的小logo),其常用属性有: ①rel属性:声明链接文件的类型,此处选icon ②type属性:可以省略 ③href属性:表示图片的路径地址  

看见这串代码了嘛,没想到在hbuilder中竟然可以敲出下面这个表格(额滴神,好神奇鸟~)

 三、body部分:网页的文本、图片等信息

奥门威尼斯网址 1

 标签的分类:

块级标签:显示为块,前后隔一行(自动换行) 行级标签:按行从左往右逐一显示。  

接下来给大家看看这一周的成果吧  ps(一周的笔记!!!)

1、 常见的块级标签:

①<h1></h1>......<h6><h6>:标题标签,自动加粗,h1最大,h6最小。 ②<hr/>:水平线标签,添加一条水平线。 ③<p></p>:段落标签, ④<br/>:换行标签, ⑤<blockquote/></blockquote>:引用标签,cite属性,表明引用的来源,一般引用网址 浏览器默认首行缩进。 ⑥<pre></pre>:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、 空格等元素能在浏览器中显示。 【补充】html 文件中空格的表示: 

一、Html的基本结构:

<!DOCTYPE html>

<html>

<head>

<meta  charset=utf-8">

<title></title>

</head>

<body>

网页的文本、图片等信息;

</body>

</html>

2、 基于布局的块级标签

列表:无序列表、有序列表、定义列表 ①有序列表:<ol></ol> 列表项:<li></li> ②无序列表:<ul></ul> 列表项:<li></li> ③定义列表(实现图文混排):<dl></dl> 列表标题:<dt>一般只有一项</dt> 列表描述项:<dd>可以有很多项</dd>

二、HTML的基本标签  

奥门威尼斯网址 ,3、组合标签:<figure></figure>用于显示图片及图片标题

他有两个子标签:<img />图片 <figcaption></figcaption>图片的标题 例如:<figure> <img src="img/EZ.jpg" height="20%" width="20%" alt="探险家"/> <figcaption>探险家 伊泽瑞尔</figcaption> </figure>

<head部分>

1、title标签:浏览器标签页显示的标题

2、meta标签:其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:<meta charset="UTF-8">

常见的字符集编码格式:

a.GB-2312:国标码,简体中文

b.GBK:扩展的国标码

c.UTF-8:万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)

③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。

3、link标签:链接网页图标(title前的小logo),其常用属性有:

①rel属性:声明链接文件的类型,此处选icon

②type属性:可以省略

③href属性:表示图片的路径地址

4、分区标签:<div></div>

<body部分>

5、常见的行级标签

<1>span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如: 这是<span>src:表示引用图片的地址。               路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址                   a、与文件处于同一层的图片,直接写图片名                   b、图片在当前文件下一层:文件名/图片名                   c、图片在当前文件上一层:../图片名                       绝对路径:file:///盘符:/文件夹/图片名,但 是严禁使用                       图片网址:网络上的图片链接,但是一般不用              ②height和width:图片的高度和宽度。可以用CSS样式代替              ③title:图片标。当鼠标指上之后显示的文字              ④alt:当图片无法显示的时候,显示的文字   <2>em(倾斜强调) <3>strong(加粗强调) <4>b(加粗) <5>i(倾斜)          Strong、em、b、i的区别     1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高     2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。   <6>q(短引用) <7>small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限 <8>a(超链接)     1、href:超链接的路径,可以是网络链接,也可以是本地文件。     2、target:跳转页面打开的位置。_self自身页面,_blank新页面。     3、title:鼠标指在超链接上显示的名称。     4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:       rel="prev"被链接文档是当前文档的前一篇文 档,       rel="next"被链接文档是当前文档的后一篇文档,       rel="icon"被链接文档是当前文档的图标       rel="stylesheet"被链接文档是当前文档的样式表     5、Rev(当前是被链接的前/后一篇)   锚链接:     ①本页面锚链接:a、设置锚点:<a name="top"></a>             b、跳转锚点:#name名     ①页面间锚链接:a、在即将跳转页面的指定位置设置锚点             b、跳转锚点:页面地址.html#name名         <a href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>    功能性链接: mailto用于给指定邮箱发送邮件       file:///e:/aaa.png打开本地文件       tencent://message/?uin=1315618220 给指定QQ发送息   <9>s标签,有误文本:删除线 <s>这是S标签中的文字</s><br /> <10>cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用 <cite>这是cite中的文本</cite><br /> <11>code:计算机代码,不保留代码格式 <pre> <code></code> </pre> <12>bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左 <bdo dir="rtl">1234567</bdo><br /> kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体 请输入“<kbd>Esc</kbd>”推迟系统<br /> <13>sup:上标文本,sub:下标文本 x<sub>6</sub><br /> © © 空格   © © 空格  <br /> <14>u:下划线 <u>这是下划线</u><br /> mark:高亮或标记文本,浏览器显示为黄色背景 <mark>mark</mark><br />

 

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:跨职业学习编制程序的苦逼生活,html5常用竹签

关键词: