超文本:指页面内可以包含图片、链接、音乐、程序等非文字元素。
标记语言:标记(标签)构成的语言
网页==HTML文档,由浏览器解析,用来展示的
静态网页:静态的资源
动态网页:HTML代码是由某种开发语言根据用户请求动态生成的
HTML文档树形结构图:<!DOCTYPE html> 1.有无(demo)
2.种类之间的区别
html haed 1.meta [页面编码] <meta>标签有2个属性,分别是 http_equiv 属性和 name 属性,不同的属性又有不同的参数值,这些不同的参数值实现了不同的网页功能。
[跳转] 1.name属性主要用于描述网页,与之对应的属性是content,content中的属性主要便于搜索引擎机器人查找信息和分类信息用的。
[页面缓存] 2.http_equiv 相当于http文件头的作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确的显示网页的内容,与之对应的属性是
[关键字] content,content中的内容就是各个参数的变量值。
[X-UA-compatible]
2.title
3.link [ stylesheet ]
[ icon ]
4.style
5.script
body 1.内行 <a>、<img>、<label>、<span>、<select>、<input>
2.块级标签 <div>、<fieldset>、<h1>、<hr>、<p>、<ol>、<ul>
3.可变标签 <button>、<iframe>、<del>
4.自定义标签
5.自定义属性
什么是标签?
是由<>包裹的单词构成(所有标签中的单词不能以数字开头),(标签不区分大小写,但推介小写)
标签分为两部分:<a>开始标签和</a>结束标签。两个标签中间的部分叫做标签体。
有些标签比较简单,使用一个即可。这种标签叫做自闭和标签。例如:<br>、<hr>、<input>、<img>
标签可以嵌套,但不能交叉嵌套 <a><b></a></b>
标签的属性:通常以键值对的形式存在。例如:name=’李’
属性只能出现在开始标签中或自闭和标签中。(属性的名字全部小写,属性值必须使用单引号或双引号包裹)
如果属性值和属性名完全一致,直接写属性名即可
body标签:
一、基本标签
<hn> n的取值范围是1~6,从大到小,用来表示标题
<p> 段落标签,包裹的内容被换行,并且也上下内容之间有一行空白
<b><strong>加粗标签
<strike> 为文本中间加上一条线
<em> 文字变成斜体
<br> 换行
<sup><sub> 上角标、下角标
<hr> 水平线
块级标签和内联标签:
块级标签<div>:<p>、<h1>、<table>、<al>、<ul>、<from>、<div>
内敛标签<span>:<a>、<input>、<img>、<sub>、<sup>、<textarer>、<span>
block(块)元素的特点:1.总是在新行上开始
2.高度、行高以及外边距和内边距都可以控制
3.宽度缺省是它的容器的100%,除非设定一个宽度
4.它可以容纳内联元素和其他块元素
inline 元素的特点:1.和其他元素都在一行上
2.高、行高、内边距、外边距都不可以改变
3.宽度就是文字或图片的宽度,不可改变
4.内联元素只能容纳文本或其它内联元素
对行行内元素注意:设置宽度width无效
设置高度height无效,可以根据height_line来设置
设置margin只有左右有效,上下无效
设置padding只有左右有效,上下无效。(元素范围增大了,对元素周围的内容没有影响)
特殊字符:&it、 > 、"、©、®
二、图形标签<img>
src :要显示图片的路径
alt :图片没有加载成功的提示
title:鼠标悬浮时的提示信息
width:图片的宽度
height:图片的高度(宽和高只使用一个属性会等比例缩放)
三、超链接标签、抛锚<a>
href :要连接的资源的路径,格式如下:href="http://www.baidu.com"
target_blank:在新的窗口打开超链接,框架名称:在指定的框架打开连接内容
name:定义一个页面的书签
用于跳转href:#书签名称
四、列表标签:
<ul>无序标签
<ol>有序标签
<li>列表中的每一项
<dl>定义列表
<dt>列表标题
<dd>列表页
五、表格标签:<table>
border:表格边框
cellpadding:内边框
cellspacing:外边框
width:像素百分比(通过css设置)
<tr>table rows <th>table head cell <td>table date cell
rowspan:单元格竖款多少行
colspan:单元格横跨多少列(即合并单元格)
<table header>:为表格进行分区
六、表单标签:(djingo)<form>
表单用于向服务器传输数据
表单能够包含(input)元素,比如:文本字段、复选框、单选框、提交按钮等。
表单还可以包含textarea、select、fieldset、label元素。
1.表单属性:HTML表单用于接受不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互。表单标签,要提交的所有内容都在该标签里面。
action:表单提交到哪。一般指向服务器端的一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理
methed:表单的提交方式。post/get,一般默认为get
get:提交的键值对放在地址栏中的url后面,2.安全性相对较差,3.对提交内容的长度有限制
post:..................................不放在地址栏中,2.安全性较高, 3............................没有限制
2.表单元素:
<input> type: text文本输入框
password:密码输入框
radio:单选框
CheckBox:多选框
submit:提交按钮
button:按钮(需要配合js)使用
file提交文件:form表单需要加上属性
name:表单提交项的健(和id属性的区别:name属性适合服务器通信时使用的名称,id是浏览器端使用的名称,id属性主要为了方便客户端编程,在css和JavaScript中使用)
value:表单提交项的值
对于不同的输入的人,value属性的用法也不同:
type=“buttun”,“reset”,“submit” 定义按钮上的显示的文本
type=“text”,“password”,“hidden” 定义输入字段的初始值
type=“checkbox”,“radio”,“image” 定义与输入相关连的值
checked:radio 和 CheckBox 默认被选中
readonly:只读 text 和 password
disabled:对所有的 input 都好使
<select>下拉选标签属性:
name:表单提交项的健
size:选项个数
multiple:multiple
<option>下拉选中的每一项属性:value表单提交项的值。selecet:selecet下拉选默认会被选中
<optgroup>为每一项加上分组
<textarea>文本域name:表单提交项的健, cols:文本域默认有多少列。rows:文本域默认有多少行
<label>
<label for ="www">姓名</label>
<input id=“www”type=“text”>
<fieldset>
<fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset>