title
 首页 > 作文

一、HTML

更新时间:2023-04-06 07:36:44 阅读: 评论:0

一、html结构

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title></head><body></body></html>

文档声明头: <!doctype html>

网站配置: <meta chart=”utf-8″>

标题标签: <title>title</title>

二、头标签(head)

head标签都放在头部分之间。这里面包含了:<title>、<meta><link>,<style>

<title>:指定整个网页的标题,在浏览器最上方显示。<meta>:提供有关页面的基本信息<link>:定义文档与外部资源的关系。<style>:定义内部样式表与网页的关系

http-equiv属性

<!--重定向 2秒后跳转到对应的网址,注意分号--><meta http-equiv="refresh" content="2;url=oeasys.cn"><!--指定文档的内容类型和编码类型 --><meta http-equiv="content-type" content="text/html;chart=utf-8" /><!--告诉ie浏览器以最高级模式渲染当前网页--><meta http-equiv="x-ua-compatible" content="ie=edge">

name属性

用于页面的关键字和描述,关键字可以有多个用 ‘,’号隔开

<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,it网站,developer,programmer,coder,geek,技术社区">  

告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率。

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

link定义文档与外部资源的关系置图标

<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon">

链接导入css,css就是修饰标签的

<link rel="stylesheet" type="text/css" href=""/>

三、body中的标签  

分割线<hr>换行<br>空格符号<u>下划线</u><s>中划线</s><del>中心删除线</del>上标<sup>8</sup>下标<sub>6</sub><h1>标题标签1</h1><h6>标题标签6</h6><div>块级标签</div><span>内联标签</span><!-- 显示文本段落的,不能包含容器标签 --><p>这是一个段落</p><p align="left">左对齐段落</p><p align="center">中对齐段落</p><p align="right">右对齐段落</p>
<a href="http://www.baidu.com">百度一下</a> <a href="#">跳转到顶部</a>
<!-- src:链接的图片资源 alt:图片加载失败时显示的文本 不失真:单设置高度或宽度不会失真--><img src="" alt="" width="">
html中:
1、行内标签:
(1)在一行内显示
(2)不能设置宽高
行内块标签img input
(有行内的特点)(可以设置宽高)
2、块级标签:
(1)独占一行
(2)可以设置宽高
如果不设置宽高,默认的宽是父亲的100%,高度是内容的高度
3、行内标签与块级标签的转换
display

列表标签

1、无序列表<ul>,无序列表中的每一项是<li>

<ul>         <li>张三</li>             <li>李四</li>             <li>王五</li>    </ul>
type="属性值"。属性值可以选:disc(实心原点,默认),square(实心方点),circle(空心圆)。

2、有序列表<ol>,里面的每一项是<li>

<ol>           <li>张三</li>        <li>李四</li>        <li>王五</li></ol>

  type="属性值"。属性值可以是:1(阿拉伯数字,默认)、a、a、i、i。结合start属性表示从几开始

3、定义列表<dl>

dt、dd只能在dl里面;dl里面只能有dt、dd。

<dl>        <dt>一</dt>        <dd>1</dd>        <dd>2</dd>        <dd>3</dd>        <dt>二</dt>        <dd>1</dd>        <dd>2</dd>        <dd>3</dd></dl>

dd是描述dt的

表格标签

<table border="" style="border-collap:collap;" cellspacing="" cellpadding=""><!-- <tr>:行 --><!-- <th>:加粗的单元格。相当于<td> + <b> --><tr><th>header</th></tr><!-- <td>:单元格 --><tr><td>data</td></tr><!-- 如果要将两个单元格合并,那肯定就要删掉一个单元格。单元格的属性:colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上<caption>:表格的标题。使用时和tr标签并列--></table>

  

<table>的属性:

border:边框。像素为单位。style="border-collap:collap;":单元格的线和表格的边框线合并width:宽度。像素为单位。height:高度。像素为单位。bordercolor:表格的边框颜色。align表格的水平对齐方式。属性值可以填:left right center。
注意:这里不是设置表格里内容的对齐方式,如果想设置内容的对齐方式,要对单元格标签<td>进行设置)cellpadding:单元格内容到边的距离,像素为单位。默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈,而是到一条边的距离,默认是与左边那条线的距离。如果设置属性dir="rtl",那就指的是内容到右边那条线的距离。cellspacing:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0bgcolor="#99cc66":表格的背景颜色。background="路径src/...":背景图片。
背景图片的优先级大于背景颜色。

<tr>:行

一个表格就是一行一行组成的嘛。
属性:

dir:公有属性,设置这一行单元格内容的排列方式。可以取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left)bgcolor:设置这一行的单元格的背景色。
注:没有background属性,即:无法设置这一行的背景图片,如果非要设置,可以用css实现。height:一行的高度align="center":一行的内容水平居中显示,取值:left、center、rightvalign="center":一行的内容垂直居中,取值:top、middle、bottom

<td>:单元格

属性:

align:内容的横向对齐方式。属性值可以填:left right center。
如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。valign:内容的纵向对齐方式。属性值可以填:top middle bottomwidth:绝对值或者相对值(%)height:单元格的高度bgcolor:设置这个单元格的背景色。background:设置这个单元格的背景图片。

单元格的合并

如果要将两个单元格合并,那肯定就要删掉一个单元格。
单元格的属性:

colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上

<caption>:表格的标题。使用时和tr标签并列

表单标签

<!-- method:表单数据的提交方式,一般取值:get(默认)和post(应用:登录注册,上传文件) --><form action="/d/file/titlepic/tuxing.html" method="get"><!-- 表单控件 --><!-- <input>:输入标签(文本框) --><input type="text" name="wd" id="" value="oeasys" /><input type="submit" name="" id="" value="提交表单" /></form>

  

属性:

name:表单的名称,用于js来操作或控制表单时使用;id:表单的名称,用于js来操作或控制表单时使用;action:指定表单数据的处理程序,一般是php,如:action=“login.php”method:表单数据的提交方式,一般取值:get(默认)和post

<input>:输入标签(文本框)

<input type="text" />

  属性:

type="属性值":文本类型。属性值可以是:text(默认)password:密码类型radio:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。
)。非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio。checkbox:多选按钮,名字相同的按钮作为一组进行选择。checked:将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时,可以用这个属性。属性值也是checked,可以省略。hidden:隐藏框,在表单中包含不希望用户看见的信息button:普通按钮,结合js代码进行使用。submit:提交按钮,传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。ret:重置按钮,清空当前表单的内容,并设置为最初的默认值image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。file:文件选择框。
提示:如果要限制上传文件的类型,需要配合js来实现验证。对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。value="内容":文本框里的默认内容(已经被填好了的)size="50":表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦readonly:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。
用了这个属性之后,在google浏览器中,光标点不进去;在ie浏览器中,光标可以点进去,但是文字不能编辑。disabled:文本框只读,不能编辑,光标点不进去。属性值可以不写。

<form action="" method="">用户名:<input type="text" name="urname" src="" /><br>密码:<input type="password" name="urpawd" /><br>邮箱:<input type="email"></inpuet><br>电话:<input type="telf"><br>网址:<input type="url" name="" id="" value="" /><br><!-- number只能输入数字包括小数点max最大值min最小值value默认值-->数量:<input type="number" max="90" min="20"><br><!-- 可以提供更人性化的输入体验,自带删除键x -->请输入商品名称:<input type="arch"><br>范围:<input type="range" max="89" min="28" value="50" /><br>颜色拾取:<input type="color" name="" id="" value="" /><br>时间:<input type="time" name="" id="" value="" /><br>日期:<input type="date"><br><!-- datetime只有苹果浏览器可以使用 -->日期时间x:<input type="datetime" name="" id="" value="" /><br>日期时间:<input type="datetime-local" name="" id="" value="" /><br>月份:<input type="month" name="" id="" value="" /><br>星期:<input type="week" name="" id="" value="" /><br><!-- 提交 --><input type="submit" id=""  name="" /></form>

  

<lect>:下拉列表标签

<lect>标签里面的每一项用<option>表示。lect就是“选择”,option“选项”。

lect标签和ul、ol、dl一样,都是组标签。

<lect>标签的属性:

multiple:可以对下拉列表中的选项进行多选。没有属性值。size="3":如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。

<option>标签的属性:

lected:预选中。没有属性值。
 1 <form> 2         <lect> 3             <option>小学</option> 4             <option>初中</option> 5             <option>高中</option> 6             <option>大学</option> 7             <option lected="">研究生</option> 8         </lect> 9         <br><br><br>10 11         <lect size="3">12             <option>小学</option>13             <option>初中</option>14             <option>高中</option>15             <option>大学</option>16             <option>研究生</option>17         </lect>18         <br><br><br>19 20         <lect multiple="">21             <option>小学</option>22             <option>初中</option>23             <option lected="">高中</option>24             <option lected="">大学</option>25             <option>研究生</option>26         </lect>27         <br><br><br>28 29     </form>

其他

        <form id="myform" method="">            <!-- placeholder提示文本,提示占位                 autofocus自动获取焦点                 autocomplete:自动完成:on打开  off关闭-->     国庆节大阅兵       用户名:<input type="text" name="urname" placeholder="请输入用户名" autofocus="" autocomplete="on" value="" /><br>            <!-- required必须输入,如果没有输入将会阻止当前的提交                 pattern正则验证             -->            手机号:<input type="tel" required="" id="" value="" pattern="^(\+86)?\d英语三级证书查询{10}$" /><br>            <!-- multiple选择多个文件 -->            文件:<input type="file" name="photo" multiple="">            <!-- 提交 -->            <input type="submit" name="" id="" value="提交" />        </form>        <form action="">            专业:            <lect>                <option value ="">前端</option>                <option value ="">java</option>                <option value ="">javascript</option>                <option value ="">csharp</option>            </lect>            <br>            <br>            <br>            <br>                        专业:            <input type="text" list="sub" name="" id="" value="" />            <datalist id="sub">                <!-- 创建选项值 -->                <option value ="前端移动开发" label="前景非常好"></option>            </dat办公室文员实习报告alist>        </form>        <form action="" method="">            用户名:<input type="text" name="urname" id="" value="" /><br>            密码:<input type="password" name="urpwd"><br>            加密:<keygen>            <input type="submit" name="" id="" value="提交" />        </form>        <!-- 只能显示,不能修改 -->        <output>只能显示,不能修改</output>        <form action="" method="">            用户名:<input type="text" name="urname" id="" value="" /><br>            密码:<input type="password" name="urpwd"><br>            加密:<keygen>            <input type="submit" name="" id="一般反义词" value="提交" />        </form>        <!-- 只能显示,不能修改 -->  考研题型      <output>只能显示,不能修改</output>        <!-- max最大值         value:当前进度值-->         <progress max="100" value=100""></porgress>                  <!-- 度量器:衡量当前的进度值            high:规定的较高的值            low:规定的较低的值            max:最大值            min:最小值            value:当前度量值-->         <meter max="100" min="0" high="80" low="40" value="30"></meter>

本文发布于:2023-04-06 07:36:42,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/6a72f777ccba5862a4fca8ef3cd6bf6a.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:一、HTML.doc

本文 PDF 下载地址:一、HTML.pdf

标签:属性   单元格   标签   表单
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图