WEB基础：HTML

来源：互联网发布：方块导航网源码编辑：程序博客网时间：2024/05/22 04:35

WEB三要素

浏览器
服务器
HTTP协议

XML和HTML

XML
可扩展(自定义)标记语言
标签、属性、嵌套关系均可扩展
用来存储或传输数据
HTML
超文本标记语言
标签、属性、嵌套关系是固定的(w3c)
某些版本的HTML就是以XML规范来定义的
理解:HTML就是标签固定的XML

HTML标签

HTML版本申明

H5：<!doctype html>   //版本申明位于html文件第一行

head元素

申明元信息，样式表，包含的脚本等等。常添加标签<head><title>,<meta>,<link>,<style>,<script></head><meta charset="UTF-8"><link rel="stylesheet" href="url">

文本元素

标题元素：<hn>:n属于[1,6]
段落元素：<p>这是一个段落</p>
列表元素：有序表，无序表
列表嵌套

<ol>        <li>            河北省            <ul>                <li>石家庄</li>                <li>保定</li>                <li>廊坊</li>            </ul>        </li>        <li>            山东省            <ul>                <li>济南</li>                <li>青岛</li>                <li>威海</li>            </ul>        </li>    </ol>

块分区元素：<div>
行内元素：
<span>:内联元素，没有特定的含义，可用作文本容器
<i>:斜体<em>:着重文字：这两个不同浏览器不一定好使
<b>:加粗
<del>:带删除线
<u>:带下划线
<br>:换行
字符实体：如空格：&nbsp; 小于号：&lt;
HTML中多个空格，制表符，换行符会被压缩成单个空格。

元素的默认显示方式

1.块：有宽高,垂直排列

h,p,ol,ul,div,table,form

2.行内：无宽高,左右排列

span,i,em,b,strong,u,del,a,label

3.行内块：有宽高,左右排列

img,input,select,textarea

CSS可以改变默认显示方式
在样式里添加display属性。
- 块: display:block;
- 行内: display:inline;
- 行内块: display:inline-block;
- 隐藏: display:none;

图像与超链接

图像元素：

<img src="url"/> 常用属性：width,heigth;

超链接与锚
- 超链接
  <a href="url" target="">文本</a>
  连接到url。target:可以取_blank,_self表示是否新建一个页面打开超链接内容
- 锚是在当前页面定义一个标记，用于跳转
  定义锚点：<a name="dot">锚点1</a>
  链接锚点：<a href="#dot">链接到锚点1</a>

<a href="#">只写#，默认链接到顶部</a>

表格元素

表格：结构化组织数据

1)基本用法    <table border="1" cellspacing="0" width="200px">        <tr>            <td>一行第一个元素</td>            <td>一行第二个元素</td>        </tr>    </table>2)跨行跨列    <table border="1" cellspacing="0" width="200px">        <tr>            <td colspan="2">唐三藏</td>        </tr>        <tr>            <td>猪八戒</td>            <td>沙和尚</td>        </tr>    </table>    <table border="1" cellspacing="0" width="200px">        <tr>            <td rowspan="2">唐三藏</td>            <td>孙悟空</td>        </tr>        <tr>            <td>猪八戒</td>        </tr>    </table>        3)行分组：<thead><tbody><tfoot>    <table border="1" cellspacing="0" width="300px">        <thead>            <tr>                <td>编号</td>                <td>名称</td>                <td>金额</td>            </tr>        </thead>        <tbody style="color:blue;">            <tr>                <td>1</td>                <td>鼠标</td>                <td>50</td>            </tr>            <tr>                <td>2</td>                <td>键盘</td>                <td>100</td>            </tr>        </tbody>        <tfoot>            <tr>                <td colspan="2">合计</td>                <td>150</td>            </tr>        </tfoot>    </table></body>

表单元素:

用来声明表单的范围,只有此范围内填写的数据才能提交给服务器.
属性action:用来声明表单提交的目标.method,enctype
表单具有12大控件

input元素

文本框
value:设置默认显示的值
maxlength:设置最大长度
readonly:设置只读

账号:<input type="text" value="tarena" maxlength="10" readonly/>

密码框:属性同上：密码:<input type="password"/>
单选框
name:组名,同一组单选才能彼此互斥.
checked:设置默认选中.
value

性别:    <input type="radio" name="sex" checked/>男    <input type="radio" name="sex"/>女

多选框
checked:设置默认选中.
name,value

    兴趣:            <input type="checkbox" checked/>竞技            <input type="checkbox" checked/>美食            <input type="checkbox"/>旅游            <input type="checkbox"/>社交

隐藏框：<input type="hidden" value="abc"/>
文件框：文件:<input type="file"/>
提交、重置、普通按钮

<input type="submit" value="注册"/><input type="reset" value="重置"/><input type="button" value="普通按钮"/>

其他元素

label标签

用来管理表单中的文字,它可以将文字与控件绑定,从而增加控件的点击范围,提高易用性.
id是元素的唯一标识,任何元素都可以有id

<input type="checkbox" id="c1"/><label for="c1">我已阅读并自愿遵守此协议!</label>

下拉选
selected:设置默认选中.
value:

    城市:            <select>                <option>请选择</option>                <option>北京</option>                <option>上海</option>                <option selected>深圳</option>                <option>广州</option>                <option>南京</option>            </select>

文本域
cols:设置宽度.
rows:设置高度.

简介:<textarea cols="30" rows="6"></textarea>

阅读全文

0 0