HTML基础整理

时间 2020-04-20

标签 html 基础整理栏目 HTML 繁體版

原文原文链接

html的基本结构

<!DOCTYPE html>    
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>html的基本结构</title>
    <head>
    <body>
            1.DOCTYPE:声明文档类型。此处为文档类型为html5;
            2.html标签声明此文件为html文件，[lang]表明语言，主要语言为英语；
            3.head标签内存放页面信息，body标签内书写页面结构；
            4.meta标签提供元信息，[charset]定义字符编码；
            5.title标签内书写页面标题；
            
    </body>
</html>

[注]：保存文件时记得文件字符编码和页面字符编码一致，避免出现乱码。（文件—另存为—编码—保存）javascript

html的基本语法

注释

格式：<!--注释的内容-->
注释方便程序员理解代码，注释的内容不会呈如今页面上。

元素

html元素：由双标签或者单标签组成。
<div></div>,<input/>

属性

html属性：写在标签名后面，用空格隔开，多个属性之间用空格隔开，同一个属性多个属性值，属性值之间也用空格隔开。
格式：html属性="属性值"
<div id="myBox" class="box active myDiv"></div>

html经常使用标签

div(division) 块级标签

<div>标签能够把html文档分割为独立区块
<body>
    <div id="docHead">文档顶部信息及导航区块</div>
    <div id="docMain">文档主体区块</div>
    <div id="docFoot">文档底部信息区块</div>
</body>

span

<span>标签被用来组合文档中的行内元素。
<span>没有固定的格式表现</span><span>当对它应用样式时，它才会产生视觉上的变化</span>

[注]块级元素会独占一整行，而行内元素一行能够显示多个。html

标题标签 h1-h6

视觉上文字字体从大到小，语义上从重到轻。一个页面只有一个h1标签。
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签 p

<p>这是一个段落</p>

换行标签 br

<div>
    珠三角地区包括了广州、深圳、东莞、珠海、中山<br/>以上都是我瞎写的
</div>

加粗标签 b、strong

<b>大写加粗的牛掰</b>
<strong>大写加粗的帅气</strong>

倾斜标签 i、em

<i>让这世界为我倾斜</i>
<em>而我为你倾斜</em>

视觉标签 b、i; 语义标签(起强调做用) strong、em

实体标签(标识符)   < > ……

书写代码时，多个空格及换行会被渲染成一个空格，因此要用标识符&nbsp;来输出空格。空格大小不等于字体大小，但受字体大小的影响。
同理像<,>这些在html语言中有特殊含义的字符，想要在页面中正常输出也要使用标识符输出。

列表标签

1.无序列表(unordered list)

列表项(list item)

标签：ul>li
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打机</li>
</ul>

2.有序列表(ordered list)

标签：ol>li
<ol>
    <li>秩序废铁</li>
    <li>最强生铁</li>
    <li>荣耀钢铁</li>
</ol>

3.自定义列表(definition list)

自定义列表项(definition term), 对自定义列表项的描述(definition description)

标签：dl>dt+dd
<dl>
    <dt>端游</dt>
    <dd>DOTA</dd>
    <dd>LOL</dd>
    <dd>DNF</dd>
    <dt>手游</dt>
    <dd>王者荣耀</dd>
    <dd>吃鸡</dd>
    <dd>阴阳师</dd>
</dl>

图片标签 img

代码：<img src="../iamges/luozhao.jpg" alt="自拍" title="你的写真"/>

[src]所引入图片的路径,../表明返回上一层目录;
[alt]图片没法正常显示时出现的文字
[titlt]鼠标悬停在图片上出现的文字

超连接(锚连接)

<a href="#"><a/>
<a href="biaobai.html" "target"="_blank"></a>
<a href="http://xiaohuangpian.com">
    <img src="../img/chaming.png"/>
</a>

[href]锚连接跳转的路径;路径通常为网址，html文件(其余页面)或者#号，#表明不跳转且回到当前页的顶部
[target]跳转方式，_self:在当前窗口跳转(默认) _blank:打开一个新窗口并跳转到路径地址

特殊用法：href="javascript:void(0);" || href="javascript:;"
此用法表示保留a标签的特性,但阻止跳转。

表格标签 table (行 tr ,单元格 td)

代码:table>tr>td
<table border="2" cellspacing="0" cellpadding="30" width="200" height="3000">
    <tr align="center">
        <td>游戏ID</td>
        <td>段位</td>
    </tr>
    <tr>
        <td>haha</td>
        <td>倔强废铁</td>
    </tr>
    <tr>
        <td>xixi</td>
        <td>固执钢铁</td>
    </tr>
</table>


<table border="1" cellspacing="0" width="400" height="300">
    <tr>
        <td>部门</td>
        <td>姓名</td>
        <td colspan="2">电话号码</td>
    </tr>
    <tr>
        <td>BUG修复部</td>
        <td>技术宅</td>
        <td>123456789</td>
        <td rowspan="2">020-1234567</td>
    </tr>
    <tr>
        <td>BUG测试部</td>
        <td>测试神</td>
        <td>987654321</td>
    </tr>
</table>

table的属性
    [border]表格边框
    [cellspacing]单元格之间的间距
    [cellpadding]单元格的边框与内容之间的间距
    [width]表格宽度
    [height]表格高度

tr的属性
    [align]内容水平对齐方式。值为:left、center、right;
    [valign]内容垂直对齐方式。值为:top、middle、bottom等
    
td的属性
    [colspan]单元占据的列数
    [rowspan]单元格占据的行数
    以上两个属性用于合并单元格(合并行:往下合并;合并列:往右合并)

表单标签 form

<form action="#" method="get" name="video">
    <label>用户名：</label><input type="text" name="username" value="用户名"/><br/>
    <label>密码：</label><input type="password" name="pwd" /><br/>
    <label>性别：</label><input type="radio" name="gender"/>male 
    <input type="radio" name="gender" checked/>female<br/>
    <label>爱好：</label><input type="checkbox" name="hobby" checked/>吃饭 <input type="checkbox" name="hobby"/>睡觉 <input type="checkbox" name="hobby"/>打机 <br/>
    <label>idol<label/>
    <select>
        <option></option>
        <option value="彭于晏" selected>彭于晏</option>
        <option value="吴彦祖">吴彦祖</option>
        <option value="蔡徐坤">蔡徐坤</option>
    </select/>
    <textarea name="biaobaiqiang" cols="30" rows="10"></textarea>
    <input type="submit" value="登陆"/>
    <input type="reset" value="重置"/>
</form>

1.form属性：
    [action]表单信息提交的后台地址
    [method]提交方式,有两种方式：get、post
    
2.表单控件:input ,[type]表单控件的类型
    [name]给同一组的表单控件加上相同的名字(写了名字就能提交)
    [value] 给表单控件添加内容
    [checked] 默认选中
    
3.type的属性值：
    text 文本框 
    password 密码框
    radio 单选框 
    checkbox 多选框 
    submit 提交按钮 
    button 普通按钮 
    reset 重置按钮
    
4.下拉列表:select,选项:option[value][selected默认选中]

5.文本域 textarea[cols列数][rows行数]

textarea限制字数的兼容方法html5

在input标签中限制字数只须要设置maxlength="number"便可，可是在textarea标签中，IE9及IE9如下浏览器是不支持的

eg:限制字数长度为231。
<textarea rows="5"  maxlength="231" onchange="this.value=this.value.substring(0, 231)" onkeydown="this.value=this.value.substring(0, 231)" onkeyup="this.value=this.value.substring(0, 231)" ></textarea>

[注] onchange、onkeydown、onkeyu三者缺一不可.java

如省略onchange，当你用复制功能，此时一直按着ctrl不松开，鼠标去点击其余地方（焦点移出textarea）时，不会自动取消超出部分；
如省略onkeydown，快速录入的时候会有不少个字符忽然不见；
如省略onkeyup，原想预计200的状况下，会变成201，而且最后一个字符是最后敲进去的。程序员

Maxlength 也不可省略，加上maxlength 当碰到IE10及以上版本时，能够完美的实现限制输入框字数的功能。不像其余低版本的IE浏览器还可能出现一个字母后消失。浏览器

HTML基础整理

html的基本结构

html的基本语法

注释

标签

元素

属性

html经常使用标签

div(division) 块级标签

span

标题标签 h1-h6

段落标签 p

换行标签 br

加粗标签 b、strong

倾斜标签 i、em

视觉标签 b、i; 语义标签(起强调做用) strong、em

实体标签(标识符) &nbsp; &lt; &gt; ……

列表标签

1.无序列表(unordered list)

列表项(list item)

2.有序列表(ordered list)

3.自定义列表(definition list)

自定义列表项(definition term), 对自定义列表项的描述(definition description)

图片标签 img

超连接(锚连接)

表格标签 table (行 tr ,单元格 td)

表单标签 form

实体标签(标识符) < > ……