Web基础（1）前端-HTML：简介、标签、HTML文档结构head、body及其内部标签

1. HTML简介

HTML，htyper text markup language，超文本标记语言

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

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

网页=HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源

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

2. 标签

什么是标签：

是由一对尖括号包裹的单词构成，例如：<html>所有标签中的单词不能以数字开头
标签不区分大小写<html>和<HTML>，推荐使用小写
标签分为两部分：开始标签<a>和结束标签</a>两个标签之间的部分，我们称为标签体
有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭合标签，例如：<br/><hr/><input/><img/>
标签可以嵌套，但不能交叉嵌套：<a><b></b></a>

标签的属性：

通常是以键值对形式出现的，例如name = "Steve"
属性只能出现在开始标签或自闭合标签中
属性名字全部小写，属性值必须使用双引号或单引号包裹，例如name = "Steve"
如果属性值和属性名完全一样，直接写属性名即可，例如readonly

3. HTML文档结构

双闭合：<html></html>

单闭合：<br/>

1）<!DOCTYPE html>标签：定义文档类型，告诉浏览器按照标准解析渲染即可

2）<html></html>标签：根节点

3） head标签：

包含meta style title script link等标签

（1）name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

为了SEO优化

（2）http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之相对应的属性值为content，content中的内容其实就是各个参数的变量值。

Refresh表示刷新，content中的2表示2秒后刷新，并转到URL指定的网址。如果不指定URL则将当前页面刷新：

指定文档的内容类型和编码类型，以utf8的格式解析，可简写为<meta charset="UTF8">：

告诉IE浏览器以最高级模式渲染网页：

（3）定义网页的名称

（4）规定编码格式

（5）链接css文件

（6）定义内部样式表

（7）定义内部脚本文件

（8）定义网站的图标

4） body标签：

包含浏览器显示的内容标签，包括div a img input p等标签

1）基本标签

<hn></hn>：标题标签，块级元素，独占一行。n的取值范围是1~6；从大到小，用来表示标题

<p></p>：段落标签，块级元素，独占一行。包裹的内容被换行，并且上下文内容之间有一行空白

<a></a>：超链接标签，把当前的文本或图片连接到其他的页面、文本或图像。target的参数设为“_self”在当前网站打开链接，“_blank”在新的标签打开链接

<a href="http://www.baidu.com" target="_blank">baidu</a>：跳转至百度

<a href="#">：跳转至页面顶部

<a href="#p1">：跳转至顶部的段落标签

<b><strong>：加粗标签

<i></i>：斜体

<u></u>：下划线

<s></s>：删除线

<sup></sup>：上标

<sub></sub>：下标

<strike></strike>：为文字加上一条中线

<em></em>：文字变成斜体

<sup>和<sub>：上角标和下角标

<br>：换行

<hr>：水平线

2）块标签和内联标签

块级标签：<p><h1><table><ol><ul><form><div>

内联标签：<a><input><img><sub><sup><textarea><span>

block（块）元素的特点：

总是在新行上开始
高度，行高以及外边距和内边距都可控制
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素

inline元素的特点：

和其他元素都在一行上
高，行高及外边距和内边距不可改变
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

对行内元素，需要注意如下：

设置宽度width无效

设置高度height无效，可以通过line-height来设置

设置margin只有左右margin有效，上下无效

设置padding只有左右padding有效，上下则无效。注意元素范围是增大了，但对元素周边的内容是没影响的。

行内块状元素inline-block：

元素的高度、宽度、行高以及顶和底边距都可设置

2）特殊字符

< 小于号

> 大于号

" 引号

® 注册号

3）图形标签<img>：

src：要显示的图片的路径

alt：图片没有加载成功时的提示

title：鼠标悬浮时的提示信息

width：图片的宽

height：图片的高（宽高两个属性只用一个会自动等比缩放）

4）超链接标签<a>：

href：要连接的资源路径，格式如下：href=“http://www.baidu.com”

target：“_blank“，在新的窗口打开链接，框架名称：在指定框架中打开链接内容

name：定义一个页面的书签

用于跳转href：#书签名称

<a href="#log">Log</a> 双引号中的log为标签的id，井号是与唯一id配合工作的

5）列表标签

<ul></ul>：无序列表

type：列表标识的类型，

disc：实心圆（默认值）

circle：空心圆

square：实心矩形

none：不显示标识

<ol></ol>：有序列表

type：列表标识的类型，

1：数字

a：小写字母

A：大写字母

i：小写罗马字符

I：大写罗马字符

<li></li>：列表中的每一项

<dl></dl>：定义列表

<dt></dt>：列表标题

<dd></dd>：列表项

6）表格标签：<table>

<thead>：表格头

<tbody>：表格主体

<tr>：表格行

<th>：表格头的单元格（默认加粗并且剧中）

<td>：表格主体中的单元格

<tfoot>：表格底部

border：表格边框

cellpadding：内边框

cellspacing：外边框

width：像素百分比（最好通过css来设置长宽）

rowspan：单元格竖跨多少行

colspan：单元格横跨多少列（即合并单元格）

7）表单标签<form>：

表单用于向服务器传输数据
表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等
表单还可以包含textarea、select、fieldset和label元素

（1）表单属性

HTML表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互，要提交的所有内容都应该在表单标签中。

action：定义表单被提交时发生的动作，提交给服务器处理程序的地址。一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

method：定义表单提交数据时的方式。表单的提交方式post/get默认取值就是get（信封）

get/post是常见的两种请求方式。

get：1.提交的键值对放在地址栏中url后面；2.安全性相对较差；3.对提交内容的长度有限制

post：1.提交的键值对不在地址栏；2.安全性相对较高；3.对提交内容的长度理论上无限制

enctype：编码类型，即表单数据编码的方式允许表单将什么样的数据提交给服务器。

取值：1.application/x-www-form-urlencoded默认。允许将普通字符，特殊字符，都提交给服务器，不允许提交文件

2.multipart/form-data允许将文件提交给服务器

3.text/plain只允许提交普通字符。特殊字符、文件都无法提交

注意：如果有文件提交给服务器，method必须为post，且enctype为multipart/form-data

8）input组元素

type：

button，普通按钮，与form表单没后任何关系

text，明文显示用户输入的数据，<input, type="text">

password，密文显示用户输入的数据，<input type="password">

radio，单选按钮，checked设置后被选中。要产生互斥效果，name值要相同

submit，负责将表中的表单控件提交给服务器，<input type="submit">

file，上传文件所用，<input type="file">

name：表单提交项的键，注意和id属性的区别。name属性是和服务器通信时使用的名称，而id属性是浏览器端使用的名称，该属性主要是为方便客户端编程，而在css和javascript中使用的。

value：表单提交项的值。对于不同的输入类型，value属性的用法也不同。

type="button","reset","submit" 定义按钮上的显示文本

type="text","password","hidden" 定义输入字段的初始值

type="checkbox","radio","image" 定义与输入相关联的值

checked：radion和checkbox默认被选中

readonly：只读，text和password适用

disabled：对所有input都适用，该属性只要出现在标签中，表示的是禁用该控件

（1）<select>下拉列表标签属性：

name：表单提交项的键

select属性：

size取值大于1的话，则为滚动列表，否则就是下拉选项框

multiple设置多选，该属性出现在<select>中，那么就允许多选（针对滚动列表）

option属性：

value选项的值

selected：selected下拉列表中的第一项默认会被选中

<optgroup label="组名">：为每一项加上分组

（2）<textarea>文本域

允许用户录入多行数据到表单控件中

属性：

cols：指定文本域的列数

rows：指定文本域的行数

name：表单提交项的键

（3）<label>，可以用label将文本与有对话框的input进行关联

（4）<fieldset>加一个框

</fieldset>

注意嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素
块级元素不能放在p里面
有几个特殊的块级元素只能包含内联元素，不能包含块级元素，如h1，h2，h3，h4，h5，h6，p，dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。错误事例：<div><h2></h2><span><span></div>

4. z-index：指定层级。如果同个位置有多个模块，指定值哪个越大就显示哪个

简单演示代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta http-equiv="refresh" content="10;URL=http://www.baidu.com">-->
    <title>FAO</title>
    <link rel="icon" href="logo.png">

</head>
<body>
    <h1 style="color:green"><b>Hello World!</b></h1>
    <a href="#log">Log</a>
    <h2>Level 2 Title</h2>
    <h3>Level 3 Title</h3>
    <img src="logo.png" width="300px" height="300px" title="Logo" alt="Image Error">
    <a href="http://www.baidu.cn" target="_blank">跳转</a>
    <p id="log">Here store the logs of the system</p>
    <ul>
        <li>IPHONE</li>
        <li>ITOUCH</li>
        <li>IPOD</li>
    </ul>
    <ol>
        <li>IPHONE</li>
        <li>ITOUCH</li>
        <li>IPOD</li>
    </ol>
    <dl>
        <dt>Goodbye iPod</dt>
        <dd>History of iPod</dd>
        <dt>New Macbook</dt>
        <dd>Appearance of the New Macbook</dd>
    </dl>

    <table border="1" cellpadding="1" cellspacing="1" width="50">
        <thead>
            <tr>
                <td>Col One</td>
                <td>Col Two</td>
                <td>Col Three</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>One</td>
                <td>Two</td>
                <td>Three</td>
            </tr>
            <tr>
                <td>I</td>
                <td>II</td>
                <td>III</td>
            </tr>
        </tbody>

    </table>

    <form action="" method="post" enctype="multipart/form-data">
        <p>用户名<input type="text" name="username"></p>
        <p>密码<input type="password" name="pwd"></p>
        <p>男<input type="radio" name="gender" value="1"></p>
        <p>女<input type="radio" name="gender" value="0"></p>
        <p>音乐<input type="checkbox" name="hobby" value="music"></p>
        <p>体育<input type="checkbox" name="hobby" value="sports"></p>
        <p><input type="button" value="Button"></p>
        <p><input type="file" name="file_name"></p>
        <p>提交<input type="submit" value="提交"></p>
        <select name="Programming Languages" multiple="multiple" size="1">
            <optgroup label="Popular languages">
                <option value="Java">Java</option>
                <option value="C">C</option>
                <option value="Python">Python</option>
            </optgroup>

        </select>

        <p>备注<textarea name="memo" value="None"></textarea></p>
        <p>
            <label for="www">姓名</label>
            <input id="www" type="text">
        </p>

        <p>
            <fieldset>
                <legend>登录</legend>
                <input type="text">
            </fieldset>
        </p>
    </form>

</body>
</html>

Web基础（1）前端-HTML：简介、标签、HTML文档结构head、body及其内部标签

猜你喜欢