HTML简单介绍及入门2

2.1 meta标签

meta用法(写在head里)

​ ①<meta charset=”utf-8”> 防止页面乱码

​ charset 字符集

​ utf-8 编码格式

​ ②<meta name=”keywords”content=”男装,女装”> 设置网页关键字

​ 注意:该标签中的关键字不是给用户看的,给搜索引擎提供的

​ ③<meta name=”description” content=”描述信息”> 设置网页描述信息

​ 注意:该标签中的描述信息不是给用户看的,是给搜索引擎看的

​ ④网页重定向

<meta http-equiv=”refresh”content=”3 ;http://www.baidu.com”>

(3代表3秒 ; 跳转的网页或者路径)

2.2 link标签

​ ①设置网页图标


  <link rel="icon" href="图标的路径">

​ 注意:最好将图标放在网页根目录下

​ ②设置引用外部样式表


  <link rel="stylesheet" href="1.css">

2.3 列表

①无序列表


  <ul type="circle/square/…">      //任选一种形式即可

       <li></li>

        …….

    <li></li>

</ul>

注意:1,无序列表中的列表项(li)可以包括任何标签

​ 2,在网页中用来展示信息的无序列表

②有序列表


<ol type="A/一/①/…">    //任选一种形式即可

       <li></li>

        …….

    <li></li>

</ol>


③自定义列表


<dl>

        <dt>标题</dt>

        <dd>列表项</dd>

        <dd></dd>

</dl>

注意:1,dt标签中只能包含行内元素

​ 2,dd标签中可以包含所有的标签

​ 3,一般网页结尾处的列表使用自定义列表

2.4 表格

1,组成

​ 表格 table

​ 行 tr

​ 列 td


<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

2, 作用

​ 显示数据

​ 网页布局

3, 属性(写在table中)

  1. border 设置边框

  2. width 设置宽度

  3. height 设置高度

  4. cellspacing 设置td与td与table之间的距离,默认值为2

  5. cellpadding 设置内容与td左侧之间的距离

  6. align : left / right / center 设置对齐方式

注:如果给table标签设置align属性,只能让整个标签居中,内容不会居中

​ 如果给tr或者td设置align属性,可以让其内容居中

  1. bgcolor : 设置背景颜色

2.5 单元格合并

设置表头 th (将td换成th)用法与td一样

设置表格标题


<caption></caption>

表格结构


<thead></thead>

<tbody></tbody>

<tfoot></tfoot>

​ 合并单元格 : 横向合并 colspan=”2” 注释掉多余的

​ 纵向合并 rowspan=”2” 跨几行就写几,删掉多余的

2.6 表格高级

表格标签除了基本的table,tr,td(或th)标签之外,还可以有如下标签:

caption:用于表示一个表格的“标题文字”(看起来在表格线的外面),写在table标签中。

thead:用于表示一个表格“头部区域”,其中可以包含若个tr(行),tr中自然应该有td(或th)。写在table标签中,tr外,即这样的层次:table->thead->tr

tbody:用于表示一个表格“主体区域”,其中可以包含若个tr(行),tr中自然应该有td(或th)。写在table标签中,tr外,即这样的层次:table->tbody->tr

tfoot:用于表示一个表格“底部区域”,其中可以包含若个tr(行),tr中自然应该有td(或th)。写在table标签中,tr外,即这样的层次:table->tfoot->tr

注意:

1,thead,tbody,tfoot用于对表格的行(tr)进行分组,此时thead组在表格头部,tfoot组在底部。

2,这3个标签出现的推荐顺序是:thead, tfoot, tbody,在他们内部再写tr。

3,thead,tfoot应该只出现一次,tbody可以出现多次。

4,所有没有明确归属到上述3个标签的行(tr),都默认归属到tbody。


2.7 表单

  1. 作用 : 收集用户信息。

  2. 组成 : ①提示信息 ②表单控件 ③表单域

  3. 表单域 : <form> </form>

  4. 属性:

  • action: 设置后台处理的后台程序

  • method: 提交数据给后台程序的提交方式 ,默认是get

    • get 提交数据 : 会将数据显示在地址栏中

    • post 提交数据 : 会通过后台提交数据

2.8 表单控件

文本输入框


<input type="text" maxlength="6" disabled value="请输入姓名" name="username" id="">
属性: maxlength    输入的最大长度
     readonly     设置控件为只读
     disabled     禁止用户输入
     value        设置默认值
     name         设置控件名称(后台可通过name的值获取该控件的值)
     id           控件的编号
     autofocus    自动获取焦点
     placeholder  占位符
     required     必须填写项(不填写没有办法提交)
     contenteditable 设定一个元素内部的文本内容是“可编辑的”。

     autocomplete 自动完成(当你刷新页面后再双击文本框会提示你之前输入过的值)   有两个属性:on和off   默认的是on

密码输入框


<input type="password">
属性: 与文本输入框的属性一样

单选框


<input type="radio" name="sex">
<input type="radio" name="sex" checked>
注意: 该控件实现单选效果需要给控件设置相同的name名称.
属性: checked  设置控件默认选中项

多选框


<input type="checkbox">看书  
<input type="checkbox" checked>学习
<input type="checkbox" checked>听音乐
<input type="checkbox">旅游
属性: checked   设置控件默认选中项

下拉列表


<select name="" id="" multiple="multiple">
    <option value="sx" selected>陕西</option>
    <option value="hn">河南</option>
    <option value="hb">河北</option>
    <option value="sd">山东</option>
</select>
属性: selected 设置默认选中项
     multiple  设置多选

 //在下拉列表中显示它的所属省
<select>
     <optgroup label="陕西省">
         <option>西安</option>
         <option>咸阳</option>
         <option>宝鸡</option>
         <option>铜川</option>
     </optgroup>
</select>

上传文件控件


<input type="file" name="" value="1">  

文本域


<textarea></textarea>

邮箱控件


<input type="email">    //会严格控制你输入的邮箱格式

数字控件


<input type="number" step="5">   //只能输入数字

网址


<input type="url" placeholder="请输入网址">  

事件日期控件


<input type="time">  //显示时间格式
<input type="date">  //显示日期格式
<input type="datetime">  //显示时间日期格式 (只在手机端响应)
<input type="month">   //显示年/月
<input type="week">    //显示年/周

取色器


<input type="color">   //可以选择颜色

滑块(范围)


<input type="range" value="20">

隐藏控件


<input type="hidden" >

按钮


提交按钮:  <input type="submit">   //提交表单数据
普通按钮:  <input type="button">   //不能提交表单数据
重置按钮:  <input type="reset">    //将数据恢复到默认值
图片提交按钮: <input type="image" src="1.jpg">  //提交表单数据

表单控件补充

可以在整个form表单外加一层fieldset


<fieldset>
    <legend>标题</legeng>
    <form>....</form>
</fieldset>

2.9 标签语义化

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

注意:

  1. 尽量少的使用无语义的标签div和span

  2. 在语义不明显时,即可以使用div或p时,尽量使用p。要使用有语义的标签

  3. 不要使用纯样式标签,如:b、font、u等,改用css样式。

3.0 内嵌框架标签iframe(了解)

内嵌框架标签iframe,主要用于在一个网页中(的某个区域),“嵌入”另一个网页

其实现方式就是使用iframe标签。

基本上,可以把iframe标签看做类似textarea标签,只要把它放在想放的位置就可以。

使用形式:

<iframe  src=”要嵌入进来的网页地址”  name=”框架名称”  width=”宽度”  height=”高度”  
frameborder=”1或0”  scrolling=”yes或no”></iframe>
说明:

1, iframe是双标签,但标签中通常不放任何内容。

2, frameborder:用于设定框架窗口是否显示“边框线”,1表示显示,0表示不显示。

3, scrolling:用于设定框架窗口是否显示滚动条(类似浏览器的滚动条)。

3.1 文档类型(了解)

所谓文档类型,基本就是指html的标准规范。

因为html技术在发展过程中,经历并使用过不同的(但其实差异较小的)几个成熟稳定版本。

这就形成了几个不同的标准。

一个html文档,其中的html代码遵循哪个版本的标准,就被称为是某个文档类型。

html文档的第一行代码(由 ”<!doctype” 开头),就是用来指定(声明)当前网页代码所使用的文档类型的。

虽然有如下5种文档类型,但其实近年以来,基本上大家都遵循html5标准了(即该标准基本普及了)。

5种文档型如下:

其中,在后4中文档类型的设定下,设定网页编码的代码需要这样来写(因为这4种都属于html4):


<meta  http-equiv=”content-type”  content=”text/html; charset=字符编码名” >


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章