1-html-基础

来源：互联网发布：txt阅读器 for mac 编辑：程序博客网时间：2024/06/06 19:09

html介绍

ref: http://www.cnblogs.com/yuanchenqi/articles/5976755.html

一、html, css, js之间的关系

html是一门语言
css，即层叠样式表，和布局有关
js实现动态网页必不可少的，也是一门语言，JavaScript

二、HTML基础

2.1、什么是html

Hyper Text Markup Language即超文本标记语言

超文本： 就是指页面内可以包含图片、链接、音乐、程序等非文字元素

标记语言： 标记（标签）构成的语言

网页： 即HTML文档，由浏览器来解析，并展示给用户的

静态网页： 静态的资源，如xx.html

动态网页： html代码是由由某种开发语言根据用户请求动态生成的

html文档树形结构图

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Firt html</title>    </head>    <body>        <h1 style="color: gray">hello frontend</h1>    </body></html>

2.2、什么是标签

是由一对尖括号包裹的单词构成例如: \

2.3、标签的属性

通常是以键值对的形式出现的，如name=”vincent”
属性只能出现在开始标签或自闭合标签中，所谓开始标签如”<h1 name=”这里就是开始标签”><h1>
属性名字要全部使用小写，属性值必须使用单引号或者是双引号括起来
如果属性名和属性值一样直接写属性名即可，如<input readonly />

2.4、标签

<!DOCTYPE html>就是为了兼容旧的网页，网页主要有两种模式，Quirks mode[ Compatibility Mode ] 和 CSScompat [ Strict mode]

可以使用下面的代码没有的浏览器使用那种模式在运行

<!DOCTYPE html> <!-- 此行如果被注释的话，那么就使用BackCompat模式 --><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        <!-- chrome: CSS1Compat -->        <!-- firefox: CSS1Compat -->        <!-- IE 11: CSS1Compat -->        alert(window.top.document.compatMode)    </script></head><body></body></html>

2.5、head标签

2.5.1、meta标签

2.5.1.1、meta标签共有两个属性，分别是http-equiv和name

http-equiv相当于http请求的文件头，可以实现定时跳转和自动刷新的功能

自动跳转实例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="refresh" content="2;http://qq.com">    <title>使用meta标签中的实现自动跳转功能</title></head><body>    <h2 style="color: slategray">使用meta标签中的http-equiv="refresh"再加上content="2;http://qq.com"实现自动跳转功能</h2> <br />    <hr />    <h3 style="color: rebeccapurple">上面content中的2单位是s，后面的是域名，表示2秒后自动跳转到指定的域名</h3> <br />    <hr />    <h3 style="color: cornflowerblue">如果content=""里面没有指定域名，则就是一个刷新功能</h3></body></html>

常用方法

<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)<meta http-equiv="content-Type" charset=UTF8"><meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />  //兼容模式，兼容ie7

name属性，属性值如果为keywords则和搜索引擎相关，提高搜索的精准度，而description则是站点的描述信息

<meta name="keywords" content="百度,无人驾驶"><meta name="description" content="百度是世界上第一大中文搜索引擎">

2.5.1.2、非meta标签

<link rel='icon' href='http://www.jd.com/favicon.ico'><link rel='sytlesheet' href='css.css'>  # 引入css.css文件<script src='imt.js'></script>          # 引入imt.js文件

如使用rel属性来设置站点标题图标

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--<link rel="shortcut icon" href="http://c.csdnimg.cn/public/favicon.ico">-->    <link rel="shortcut icon" href="img/apple.jpeg">    <title>标题 | 图标</title></head><body></body></html>

2.6、body标签

2.6.1、常用标签

<hn> n 的取值范围为1~6，用来表示标题
<p> 段落标签，包裹的内容被换行，并且上下内容之间有一行空白
<b> 加粗显示
<strike> 删除线
<del> 可以替换strike标签，也是删除线的功能
<em> 斜体
<sup> 和 <sub> 上标和下标
<br>
<hr> 水平线
<div> <span>

2.6.2、标签分类

块级标签: <p> <h1> <table> <ol> <ul> <form> <div>
内联标签: <a><input><img><sub><sup><textarea<>span>

2.6.3、block(块)元素的特点

2.6.4、inline元素的特点

2.6.5、特殊字符

<[\<] >[\>] “[\"] ©[\©] ®[\®]

三、图片标签 <img>

四、超链接标签[锚标签] <a>

功能：实现页面跳转或者是页内跳转，即锚

href: 要连接的资源路径，格式 href=”http://www.baidu.com”协议名必须要写，不然会出错
target: _blank 在新标签中打开链接，如果是frame名称，则在指定的frame中打开
name: 定义一个页面的书签
- href 跳转
- #id 锚

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>锚，实现类似索引的功能</title>    <style>        #chapter-1{ height: 100px; background: antiquewhite}        #chapter-2{ height: 100px; background: wheat }        ... ...        #chapter-12{ height: 100px; background: pink}    </style></head><body>    <a href="#chapter-1">chapter I</a>    <a href="#chapter-2">chapter II</a>    ... ...    <a href="#chapter-12">chapter XII</a>    <div id="top"></div>    <div id="chapter-1">        第 1 章     <br />        <p>#在html中就是标签选择器</p>        <p>每个div的id都不能是一样的，然后在css中，即head中的style中使用#div_id的方式来获取到div的位置对它进行修饰</p>    </div>    <div id="chapter-2">chapter II</div>    <div id="chapter-3">chapter III</div>    ... ...    <div id="chapter-12">chapter XII</div>    <div align="right"><a href="#top">TOP</a></div></body></html>

五、列表标签

<ul> 无序列表
<ol> 有序列表
<dl> 定义列表

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>列表 ol ul dl</title></head><body>    无序列表 [ unorderd list ]    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>    </ul>    有序列表 [ orderd list ]    <ol>        <li>一</li>        <li>二</li>        <li>三</li>        <li>四</li>    </ol>    定义列表 [ define list ]    <dl>        <dt>第一章</dt>            <dd>1</dd>            <dd>2</dd>        <dt>Define Title</dt>            <dd>Define Data</dd>            <dd>Define Data</dd>    </dl></body></html>

六、表格标签

border: 表格边框
cellpadding: 内边距
width: 像素百分比【最好通过css来设置】
<tr>: table rows
- <th>: table head cell
- <td>: table data cell
rowspan: 单元格横跨多少行[横向合并单元格]
colspan: 单元络竖跨多少行[竖向合并单元格]
<tbody>: [不常用]，对表格进行分区

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表格</title></head><body>    <table border="1px" cellpadding="1px" width="2px" align="center">        <th>filed-1</th>        <th>filed-2</th>        <th>filed-3</th>        <th>filed-4</th>        <tr>            <td>11111111</td>            <td>22222222</td>            <td>33333333</td>            <td>44444444</td>        </tr>        <tr>            <td>11111111</td>            <td>22222222</td>            <td>33333333</td>            <td>44444444</td>        </tr>        </tr>    </table></body></html>

七、表单标签

表单用于向服务器传输数据

表单能够包含input元素，比如文字段、复选框、提交按钮等

表单还可以追念textarea、select、filedset和label元素

7.1、表单属性

html表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现web和服务器的交互

action: 表单提交到那里，一般指向服务端的一个程序处理
method: 表单提交方式，默认为get
- get:
  - 1、提交的键值对放在Url后面，明文传输
  - 2、安全性差
  - 3、长度有限制
- post: 建议使用post

7.2、表单元素

input的一些元素

type
- text 文本输入框
- password 密码输入框
- checkbox 多选框
- radio 单选框
- submit 提交按钮
- reset 重置
- button 按钮(需要配合js使用)，button和submit的区别
- file 提交文件，form表单需要加上属性enctype=”multipart/form-data”
name 表单提交的键
- 和id的区别
  - name属性是和服务器通信时使用的名称，即传值给服务器，如有一个username的name值，则服务器端可以通过http请求获取到username的值
  - id主要是给css, js选择器来惟一标识的
value 表单提交的值，不同的输入类型，value属性的用户也不相同

type="button", "reset", "submit" - 定义按钮上的显示的文本type="text", "password", "hidden" - 定义输入字段的初始值type="checkbox", "radio", "image" - 定义与输入相关联的值

checked radio 和 checkbox 默认被选中
readonly 只读. text 和 password
disabled 对所用input都好使

上传文件需要注意两点：
* 1、请求方式必须是post
* 2、enctype=”nultipart/form-data”(注，这个属性需要写在form标签里)

7.3、下拉菜单标签<select>

name: 表单提交项的键
size: 选项个数
multiple: multiple
- <option> 下拉选中的每一个选项
- value: 表单提交的值，
- selected: select菜单默认被选中
- <optgroup>为每一项加上分组

7.4、文本域<textarea>

name: 表单提交的键
cols: 文本域默认有多少列
rows: 文本域默认有多少行

7.5、<label>

label标签就是将显示的文字和input中的id属性相关联，目前只用到input，其它的还未知

如有一个需要输入的姓名的输入框，正常情况下点击输入框，但是现在使用label标签后直接点文字就可以跳转到输入框中

<label for="www">姓名</label><input id="www" type="text" />

7.6、<fieldset>

代码

<fieldset>    <legend>welcome to login</legend>    <input type="text" /></fieldset>

效果如下：

welcome to login health information

height:

weight:

阅读全文

0 0