HTML相关

qgd的博客

于 2020-05-25 22:34:06 发布

阅读量179

点赞数

本文链接：https://blog.csdn.net/m0_46563579/article/details/106201302

版权

简介：

超文本标签语言是目前网络上应用最广泛的语言之一构成网页文档的基石之一

HTML文本是由HTML标签组成的描述性文本，HTML文本可以说明文字，图形，动画，声音，表格，链接等

超文本标记语言是web编程的基础，超文本之超体现在“超链接”以及“媒体文件”（超越了普通文本文件）

是一种描述性语言用于描述（用标签）超文本中内容的显示方式（文字大小颜色图片尺寸及位置）

特点：简单灵活，可扩展，平台无关性

结构：头部（head）----描述浏览器所需信息，表示页面不可见的部分(页面的属性：编码，是否刷新，关键字，作者等)

主体（body）----包含所要说明的具体内容

建议使用UTF-8编码

标签：

HTML标签是页面的根标签 html标签表示网页文件的开始,应该把它放在文档的外层（doctype不算），其他所有的标签都应该放在 <html> 和 </html>

HEAD 标签
head表示头部标签，head>标签中通常放title标签、meta标签、style标签等。所以head标签主要用来放一下用来定义页面属性的标签。
BODY标签
body表示主体标签，网页上所有要显示的内容都放在这个标签内。

标签通常是成对出现的，分为开始标签<标签>和结束标签</标签>

标签可以有属性(align),属性必须有值（center） <标签属性=“值”>内容</标签>

开始标签和结束标签中包含的内容称之为区域。标签不区分大小写。

标签之间的父子关系通过缩进体现出来

常见标签：

div：标准快标签，主要用来布局

pn：标题标签(n=1-6)

p：段落标签 ------------ 最常见的文本修饰标签

b/strong：加粗效果

i/em：加斜

u：下划线

del：删除线

span：标准行内标签，主要用来修饰文本

br：换行标签

hr：分割线标签

pre：原样输出标签

sup：上标显示标签

sub：下标显示标签

语义化标签：（对应的标签干对应的事）

article：文章

aside：边缘部分

header：页面的顶部内容

section：正文部分

footer：页面尾部

行内标签：b，i，u，del这些标签，只占据内容部分，没有宽高，标准行内标签 span

快标签：p，h1，都是块标签，只占据一行，即使是内容占不满标准快标签 div

表格标签：用来展示数据信息用来布局（流行于上世纪90年代及本世纪初）

简单易懂，上手容易但是布局固定要改版网页特别麻烦

table thead ：表头 tbody：主体 tfoot：尾巴 tr：行标签 td：单元格

例：

<!DOCTYPE html>
<html>
<head>
   <seta charset="UTF-8">
   <title>汇款单</title>
</head>
<body>
   <h1><b>工商银行电子汇款单</b></h1>
   <table border="1" cellspacing="0" cellpadding="0"
   width="70%">
       <tr>
           <td colspan="2"><b>回单类型</b></td>
           <td>网上转账汇款</td>
           <td colspan="2"><b>指令序号</b></td>
           <td>HQH0000000000000013878172</td>
       </tr>
       <tr>
           <td rowspan="4"><b>收款人</b></td>
           <td>户名</td>
           <td>老王</td>
           <td rowspan="4"><b>付款人</b></td>
           <td>户名</td>
           <td>小王</td>
       </tr>
       <tr>
           <td><b>卡号</b></td>
           <td>00000001</td>
           <td><b>卡号</b></td>
           <td>000000002</td>
       </tr>
       <tr>
           <td>地区</td>
           <td>西安</td>
           <td>地区</td>
           <td>西安</td>
       </tr>
       <tr>
           <td><b>网点</b></td>
           <td>工商陕西西安业务处理中心</td>
           <td><b>网点</b></td>
           <td>陕西西安业务中心</td>
       </tr>
       <tr>
           <td colspan="2"><b>币种</b></td>
           <td>人民币</td>
           <td colspan="2"><b>钞汇标志</b></td>
           <td>钞票</td>
       </tr>
       <tr>
           <td colspan="2"><b>金额</b></td>
           <td>1000000</td>
           <td colspan="2"><b>手续费</b></td>
           <td>1000</td>
       </tr>
       <tr>
           <td colspan="2"><b>合计</b></td>
           <td colspan="4">人民币（大写）壹佰万圆整</td>
       </tr>
       <tr>
           <td colspan="2"><b>交易时间</b></td>
           <td>2020年5月17日</td>
           <td colspan="2"><b>时间戳</b></td>
           <td>2020-05-17 21:51:00 </td>
       </tr>
   </table>
   <p>票据打印时间：2020-05-17 21：55：00</p>
   <p><del>票据打印单位：陕西西安业务中心</del></p>
   <p>操作员:<i>marry</i></p>
</body>
</html>

多媒体标签：

img：图片显示标签 <img src="路径" alt：文字提示功能 tittle：用来显示描述图片的文字，当鼠标放到图片上时出现 >

（图片设置宽高时设置一个即可）路径：相对路径

绝对路径

网络路径

video：播放视频 <video src="路径" controls autoplay muted(静音设置)></video>

audio：播放音频同视频

超链接标签： a---行内标签 <a href="跳转地址" （target=self/_back（在选项卡中跳转--默认/打开一个新的标签页））>可见内容</a>

做锚点使用

列表标签：

有序列表：<ol type:表示有序列表的默认表示（1.a，i）start：表示开始的位置 ></ol>

无序列表：ul:type：circle--空心圆 disc--实心圆 square--方形

数据列表：dl 标题--dt 内容--dd

表单标签: HTML主要的一部分用于服务器和用户数据进行数据交互的标签

form ：表单标签其他我的所有标签必须包裹在form中

属性：action--服务器处理的url disable：禁用 checked：默认

method：网络请求方式常见有get（不安全，裸漏数据），post（较安全） readonly：只读

enctype：文件上传时需要修改，一般不要改动 multiple：页面滑动

select：地址

input：输入框

textarea: 建议框（标签紧挨不要换行）<textarea name=" advice" id="" cols="宽" rows="高"

例：用户注册

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>表单标签</title>
</head>
<body>
   <h1>用户注册</h1>
       <form action="#" method="post" >
           <p>
               <label for="username">用户名：</label>
               <input type="text" name="username" value="" >
           </p>
           <p>
               <label for="password">密码：</label>
               <input type="password" name="password">
           </p>
           <p>
               <label for="gender">性别：</label>
               <input type="radio" name="gender" value="男" >男
               <input type="radio" name="gender" value="女" checked >女
           </p>
           <p>
               <label for="favorite">爱好：</label>
               <input type="checkbox" name="fav" value="写作">写作
               <input type="checkbox" name="fav" value="听音乐">听音乐
               <input type="checkbox" name="fav" value="体育" checked>体育
           </p>
           <p>
               <label for="address">省份：</label>
               <select name="address" id="address">
                   <option>陕西</option>
                   <option>甘肃</option>
                   <option>宁夏</option>
                   <option>青海</option>
                   <option>新疆</option>
               </select>
           </p>
           <p>
               自我介绍：<br>
               <textarea name="advice" id="advice" cols="50" rows="20"></textarea>
           </p>

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

qgd的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML相关

简介：超文本标签语言是目前网络上应用最广泛的语言之一构成网页文档的基石之一 HTML文本是由HTML标签组成的描述性文本，HTML文本可以说明文字，图形，动画，声音，表格，链接等超文本标记语言是web编程的基础，超文本之超体现在“超链接”以及“媒体文件”（超越了普通文本文件）是一种描述性语言用于描述（用标签）超文本中内容的显示方式（文字大小颜色图片尺寸及位置）特点：简单灵活，可扩展，平台...
复制链接

扫一扫