网页设计HTML零基础入门

、Html概述

Html是Hyper Text Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容文件渲染成网页，显示的网页可以从一个网页链接跳转到另一个网页。

二、Html标签语法

Html中标签分为：成对标签和自闭合标签【空标签】

1、成对标签

成对出现，有开始标签必须有结束标签，内容包裹在两个标签中，而且开始标签名和结束标签名一致,并且结束标签必须以斜杠/开头

语法：

<font>内容</font>

2、自闭合标签

只有一个标签，用斜杠结束，斜杠也可以省略

语法：

<br/>

注意事项：

成对标签中，结束标签必须以斜杠开头
成对标签与成对标签可以嵌套不能交叉
标签名不区分大小写，但是我们都必须小写

三、Html基本架构

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    
</body>
</html>

1、！DOCTYPE

!DOCTYPE html是文档声明，定义文档类型为html，并且告诉不同的浏览器用标准方式进行解析html语言，如果不写的话，会产生怪异模式，所谓怪异模式，就是浏览器会用自己的方式进行解析，不同的浏览器有各自的解析方式，从而会出现无效果、不兼容等问题。
注意，html中有两种声明类型，一种叫做xhtml，即html，另一种叫做html5，html5是xhtml的升级版，所以我们建议使用html5的声明方式
xhtml声明方式：
<htmlxmlns="http://www.w3.org/1999/xhtml">
html5声明方式：
<!DOCTYPE html>

2、html

html是html文档的整体，也就是表示一个网页。
html中的lang="en"是定义该文件语言是英文

3、head

head是html的第一层子元素【子标签】，负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏中。即title标签。

4、meta

meta是html语言head标签中的一个辅助性标签，该标签不包含任何内容，但是该标签的属性定义了与文档相关联的名称，比如：编码

<meta charset="utf-8"></meta>

5、body

body也是html的第一层子元素，我们页面中显示的所有内容全部都是编写在该标签体中。

四、Html文档规范

html制定了文档的编写规范，必须遵守。
所有的标签必须小写
所有的属性必须用双引号括起来

五、Html注释

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上。
注释的语法：


六、html基本属性

注：属性是标签的辅助作用。

属性描述 bgcolor 设置网页的背景颜色 background 设置网页的背景图片

1.bgcolor

设置网页的背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body bacolor="pink">
    
</body>
</html>

2.路径

我们在开发网页时，需要经常的插入图片、视频、文件等一些操作，但是我们需要指定文件所在的位置，这个位置就是所谓的路径

路径分为：

相对路径指目标相对于当前文件的路径，网页结构设计中多采用这种方式来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下： ./ ：代表文件所在的目录（可以省略不写）../ ：代表文件所在的父级目录../../ ：代表文件所在的父级目录的父级目录/ ：代表文件所在的根目录【/ ：可以理解为目标文件的绝对路径】
绝对路径指目标文件的完整路径，从盘符开始。

3.background

设置网页的背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <title>html的属性</title>
</head>
<body background="../images/10.jpg">
    
</body>
</html>

注意事项：
bgcolor和background不能同时使用
background不能指定绝对路径

七、Html标签

1.网页的组成

网页的组成：文字、图片、视频、超链接、列表、表格、表单等组成。

2、文本段落标签

标签描述 hn 设置文字标题【n：取值范围 1~6】 center 居中对齐 hr 水平线属性（width：宽度 color：颜色 size：粗细） br 换行 p 段落

3、文本控制标签

标签描述 font 设置字体，需要借助属性设置

属性描述 color 设置字体颜色 size 设置字体大小，不需要带单位，取值范围：1~7【浏览器默认值：3】 face 设置字体风格

<font size="2" color="red" face="黑体"></font>

4、文本格式化标签

标签描述 b 定义粗体文本 em 定义着重文字 i 定义斜体文字 small 定义小号字 strong 定义加重语气 sub 定义下标字 sup 定义上标字 ins 定义插入字 del 定义删除字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html文本格式化标签</title>
</head>
<body>

    <b>粗体文本</b>
    <i>倾斜文本</i>
    <em>着重文本</em>
    <small>小号字</small>
    <strong>加重语气</strong>
    <sub>上标</sub>
    <sup>下标</sup>
    <ins>插入字</ins>
    <del>删除字</del>
    
</body>
</html>

5、图片标签

在Html中，图像由
标签定义。
是空标签，意思是说，它只包含属性。
要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。

标签描述 img 图片标签

属性描述 src 指定图片的地址 width 设置图片的宽度 height 设置图片的高度 alt 设置图片的预备文本

注意事项：不建议设置图片大小，容易失真

6、audio

在Html中，声音由标签定义。

标签描述 audio 声音标签

属性描述 src 指定声音地址

<audio src="nice.mp3">对不起，您的浏览器不支持</audio>

7、video

在Html中，视频由video标签定义

标签描述 video 视频标签

属性描述 src 指定视频地址

<video src="美女.mp4">对不起，您的浏览器不支持</video>

8、超链接

a标签定义超链接，用于从一个页面链接到另一个页面。
a标签最重要的属性是href，它指定链接的目标。
在所有浏览器中，链接的默认外观如下：
未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

语法：

<a href="链接目标">点击内容</a>

属性描述 href 指定链接目标 name 指定锚的名称 download 指定下载链接 target 指定跳转方式属性值描述 _blank 新窗口打开【常用】 _parent 在父窗口中打开链接【了解】 _self 默认，在当前窗口打开【了解】 _top 在当前窗体打开链接，并替换当前的整个窗体【了解】 framename 到 iframe 在讲【常用】

超链接分类：

内部链接链接目标：本地页面 <a href="demo.html">点击内容</a>
外部链接链接目标：外部页面 <a href="http://www.baidu.com">点击内容</a>
多媒体链接链接目标：图片、视频等 <a href="images/美女.jpg">点击内容</a>
电子邮件链接链接目标：电子邮件【系统自带的电子邮件】 <a href="mailto:12345@qq.com">点击内容</a>
锚链接链接目标：锚点 1.建立锚点
<a name="锚点名"></a>

2.跳转
<a href="#锚点名">点击内容</a>

9、列表

列表的使用与word等软件的列表概念相似，只不过是应用在网页展示中。

1.有序列表

有序列表是指有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 有序列表 -->
    <ol type="a">
        <li>新闻一</li>
        <li>新闻二</li>
        <li>新闻三</li>
    </ol>

属性描述 type 设置符号类型值：1 a A I i 默认数字 start 从第几个开始【用于ol标签中】 value 从第几个开始【用于li标签中】

<!-- 有序列表 -->
    <ol type="a" start="4">
        <li>新闻一</li>
        <li type="1" value="1">新闻二</li>
        <li>新闻三</li>
    </ol>

2、无序列表

无序列表是指没有数字编号或字母的列表项，可以使用css定义更多样式。

<!-- 无序列表 -->
<ul>
    <li>童装</li>
    <li>男装</li>
    <li>女装</li>
</ul>

属性描述 type 用于设置符号类型，默认：实心圆值：空心圆、正方形【用于ul、li】

<!-- 无序列表 -->
<ul type="square">
        <li>童装</li>
        <li type="circle">男装</li>
        <li>女装</li>
    </ul>

3、描述列表

描述列表指每个列表项有单独的标题。

<!-- 描述列表 -->
    <dl>
        <dt>开源产品</dt>
        <dd>Java封装库</dd>
        <dd>Web组件库</dd>
        
        <dt>网站导航</dt>
        <dd>mrliujava.com</dd>
        <dd>mrliuweb.com</dd>
    </dl>

10、表格

表格在网页开发中使用频率非常高，尤其是数据展示的时候。

10.1 基本使用

标签描述 table 代表表格标签 caption 表格标题 thead 表头部分 tbody 表格主体部分 tfoot 表格尾部

属性描述 border 表格边框 cellspacing 单元格与单元格间距 width 宽度 height 高度 bgcolor 设置背景颜色 background 设置背景图片 align 对齐方式

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

10.2 单元格合并

属性说明 rowspan 行合并 colspan 列合并

下面是行合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td rowspan="2">JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td>傻蛋</td>
                <td>妖</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

下面是列合并：

<!-- 表格 -->
    <table border="1" cellspacing="0" width="600px" height="200px">
        <caption>员工薪资统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职位</th>
                <th>薪资</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>狗蛋</td>
                <td>男</td>
                <td>JavaEe工程师</td>
                <td>8780</td>
            </tr>

            <tr>
                <td>2</td>
                <td>黑妞</td>
                <td>女</td>
                <td>Web前端工程师</td>
                <td>9750</td>
            </tr>

            <tr>
                <td>3</td>
                <td colspan="2">傻蛋</td>
                <td>测试工程师</td>
                <td>996</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>当前页：1 页</td>
                <td>上一页</td>
                <td>下一页</td>
                <td>尾页</td>
                <td>共 3 页</td>
            </tr>
        </tfoot>
    </table>

11、表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkbox)等等。

11.1 基本使用

表单需要使用表单标签来设置：

<form>
input元素
</form>

11.2 GET&POST

属性说明 action 后台地址 method 提交方式GET或POST

GET和POST区别：

1.GET

数据会显示在地址栏中，数据不安全
数据大小有限制
数据通过请求头传递

2.POST

数据不会显示在地址栏中，数据安全
数据对大小无限制
数据通过实体内容传递

<form action="后端接口" method="POST">
        <input type="text">
        <input type="password">
</form>

11.3 LABEL

使用label用于描述表单标题，当点击标题后文本框会获得焦点，需要保证使用的ID在页面中是唯一的。

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" id="username">

        <label for="password">密码</label>
        <input type="password" id="password">
</form>

也可以将文本框放在label标签内部，这样就不需要设置id与for属性了。

11.4 INPUT

文本框用于输入单行文本使用，下面是常用属性与示例。

属性说明 type 表单类型,默认为text name 后端接收字段名 required 必须输入 placeholder 提示文本内容 value 默认指 maxlength 允许最大输入字符数 size 表单长度,一般用css来控制 disabled 禁用,不可提交后端 readonly 只读,可提交后端 accept 设置选中类型比如:.jpg capture 使用麦克风\视频或摄像头哪种方式获取手机上传文件,支持的值有microphone , video , camera

11.4.1 基本示例

<form action="后端接口" method="POST">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名" maxlength="5" size="50" required>
</form>

11.4.2 调用摄像头

当input类型为file时手机会让用户选择图片或者拍照,如果想直接调取摄像头使用以下代码.

<form action="后端接口" method="POST">
        <label for="file">上传文件</label>
        <input type="file" name="file" id="file" accept="*.jpg" capture="camera">
</form>

11.4.3 其他类型

通过设置表单的type字段可以指定不同的输入内容.

类型说明 email 输入内容为邮箱 url 输入内容为URL地址 password 输入内容为密码项 tel 电话号,移动端会调出数字键盘 search 搜索框 hidden 隐藏表单 submit 提交表单 reset 重置表单 button 自定义按钮

11.4.4 HIDDEN

隐藏表单用于提交后台数据,但在前台内容不显示所以在其上做用样式定义也没有意义.

<input type="hidden" name="id" value="1">

11.4.5 SUBMIT

创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据,比如:AJAX,或者Html的表单按钮.

a.使用input构建提交按钮,如果设置了name值,那么按钮数据也会提交到后台,如果有多个表单项可以通过这些进行判断是哪个表单提交的.

<input type="submit" name="submit" value="提交表单">

b.使用button也可以提交,设置type属性为submit或不设置都可以提交表单.

<button type="submit">提交表单</button>

11.4.6 禁用表单

通过为表单设置disabled或readonly都可以禁止表单,单readonly表单的数据可以提交到后端

<input type="text" value="数据" readonly>

11.4.7 PATTERN

表单可以通过设置pattern属性指定正则验证.

属性说明 pattern 正则表达式验证规则 oninvalid 输入错误时触发的事件

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="username" id="username" pattern="[a-z]{5,20}" oninvalid="validate('请输入5~20位字母的用户名')">
        <button>提交表单</button>
    </form>

    <script>
        function validate(message){
            alert(message);
        }
    </script>

11.4.8 TEXTAREA

文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor , ckeditor等.

属性说明 cols 列字符数(一般使用css控制更好) rows 行数(一般使用css控制更好)

<textarea cols="30" rows="3">请踩踩我......</textarea>

11.4.9 SELECT

下拉列表项可用于多个值中的选择.

属性说明 multiple 支持多选 size 列表框高度 optgroup 选项组 selected 选中状态 option 选项值

<form action="">
        <select multiple size="10">
            <option value="">选择课程</option>
            <optgroup label="后端">
                <option value="">JAVA</option>
                <option value="">PHP</option>
                <option value="">LINUX</option>
            </optgroup>

            <optgroup label="前端">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">JAVASCRIPT</option>
            </optgroup>
        </select>
    </form>

11.4.10 RADIO

单选框指只能选择一个选项的表单,如性别的选择:男 , 女 , 保密只能选择一个.

属性说明 checked 选中状态

<form action="">
        <input type="radio" name="" id="boy" checked>
        <label for="boy">男</label>

        <input type="radio" name="" id="girl">
        <label for="girl">女</label>
    </form>

11.4.11 CHECKBOX

复选框指允许选择多个值的表单

属性说明 checked 选中状态

<form action="">
        <input type="checkbox" name="JAVA" id="java">
        <label for="java">JAVA</label>

        <input type="checkbox" name="WEB" id="web">
        <label for="web">WEB</label>
    </form>

11.4.12 FILE

文件上传有很多方式,可以使用插件或者JS拖放上传处理.Html本身也提供了默认的上传功能,只是上传效果并不是很美观.

属性说明 multiple 支持多选 accept 允许上传类型.png , .psd 或者 image/png , image/gif

<form action="" enctype="multipart/form-data">
        <input type="file">
        <input type="submit" value="上传">
    </form>

11.4.13 日期时间

属性说明 min 最小时间 max 最大时间 step 间隔: date缺省是1天 week缺省是1周 month缺省是1月

a.日期选择

<h1>日期选择</h1>
    <form action="">
        <input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
    </form>

b.周选择

<h1>周选择</h1>
    <input type="week" name="" id="">

c.月份选择

<h1>月选择</h1>
    <input type="month" name="" id="">

d.日期与时间

<h1>日期与时间</h1>
    <input type="datetime-local" name="" id="">

11.4.14 DATALIST

input表单的输入值选项列表

<form action="">
        <label for="username">用户名</label>
        <input type="text" name="" id="usernmae" list="less">
        <datalist id="less">
            <option value="JAVA">后台管理语言</option>
            <option value="CSS">美化网站页面</option>
            <option value="MYSQL">掌握数据库使用</option>
        </datalist>
    </form>

12、框架集

frameset元素可定义一个框架集。它被用来组织多个窗口（框架），每个框架存有独立的文档，在其最简单的应用中，frameset元素仅仅会规定在框架集中存在多少列或多少行，您必须使用cols或rows属性。

注意事项：由于是分割原网页，所以我们不能在body中进行编写，在head中进行分割。

标签说明 frameset 框架集 frame 框架

属性说明 cols 定义框架集中列的数目和尺寸 rows 定义框架集中行的数目和尺寸 frame border 去除框架边框 scrolling 去除滚动条

12.1 垂直框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset cols="50%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0"  scrolling="no"></frame>
    </frameset>
</head>
<body>
    
</body>
</html>

12.2 水平框架

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Html水平框架</title>
		<frameset rows="50%,*" >
				<frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
		</frameset>
	</head>
<body>
</body>
</html>

12.3 混合框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html混合框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="http://www.taobao.com" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

12.4 导航框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html美女</title>
</head>
<body>
    
    <img src="../images/10.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html野兽</title>
</head>
<body>
    

    <img src="../images/timg.gif" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html动物</title>
</head>
<body>
    
    <img src="../images/4.jpg" alt="">

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html链接</title>
</head>
<body>

    <a href="Html美女.html" target="view">美女图片</a>
    <a href="Html野兽.html" target="view">野兽图片</a>
    <a href="Html动物.html" target="view">动物图片</a>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html垂直框架</title>

    <frameset rows="20%,*" >
        <frame src="http://www.baidu.com" frameborder="0" scrolling="no"></frame>
        <frameset cols="20%,*">
            <frame src="Html链接.html" frameborder="0" scrolling="no"></frame>
            <frame src="https://www.huya.com/" frameborder="0" scrolling="no" name="view"></frame>
        </frameset>
        
    </frameset>
</head>
<body>
    
</body>
</html>

13、内联框架

iframe元素会创建包含另外一个文档的内联框架。

属性说明 align 对齐方式，后期采用css的方式进行设置 width 设置宽度 height 设置高度 src 设置iframe中显示的文档的URL name iframe的名称 scrolling 是否显示滚动条 frameborder 设置iframe的边框

完小编前段时间发表的HTML学习之后，相信大家对网站建设与网页编写有了一定的初步了解，今天我们来开始介绍层叠样式表css，css是为HTML页面的排版美化而设计的，可以实现html无法设计的效果，一般是用来配合html来使用的，一般模式：选择器{属性:值}即selector{property:value}例如：body{corlor:red;font-size：12px;}，他有三种引入方式：行内样式、内部样式表、外部样式表。

css三种嵌入方式：

一、行内样式

使用style属性引入CSS样式。

示例：

<h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>行内样式</title> </head> <body>  <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p标签</p> </body> </html>

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例：

<head>

h3{

color:red;

}

</style>

</head>

例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>内部样式表</title>  <style type="text/css"> div{ background: green; } </style> </head> <body> <div>我是DIV</div> </body> </html>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：

1、链接式

2、导入式

@import url("css文件路径");

</style>

例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部样式表</title>  <link rel="stylesheet" type="text/css" href="css/style.css" />  <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>

行内样式>内部样式>外部样式(后两者是就近原则)。

css注释格式如下：

/* 注释如下*/

css中的颜色值表示如下：

可以是直接写英文单词，例如蓝色尽可以写blue；还可以写为十六进制字符，例如#rrggbb\#ffcc00,#rgb如:#fc0十六进制的颜色可以在颜色表中查询，这里我给大家提供一个，当然网上也有很多，大家也可以自己百度一下：

还有一种颜色的表示方式就是rbg模式，例如：

rgb(x,x,x) 其中x是一个0-255的整数值如:rgb(255,204,0)

rgb(x%,x%,x%) 其中x是一个0-100的整数值如rgb(100%,80%,0%)

Css的长度单位：

相对长度单位：px 像素（Pixel） em 相对于当前文本字体尺寸的倍数 % 百分比

绝对长度单位：in英寸（Inch） pt 点（Point） cm 厘米（Centimeter）mm 毫米（Millimeter）。

换算比例：1in = 2.54cm = 25.4 mm = 72pt

Css的七大类选择器：

标签选择器例如：p{};

类选择器例如.div{};（一个点加命名的类名）

Id选择器例如 #div{};（斜体井号加ID名，ID是不可重复的，类可以相同）

通配符选择器：*{}；

伪类选择器：

a:link{}没有访问时的链接；

a:visited{}已经访问过时的链接；

a:hove{}鼠标滑过时的链接；

a:active{}已经选中的链接；

:first-child{}为第一个字符设置样式；

:last-child{}为最后一个字符设置样式；

：nth-child（）{}可以为指定字符设置样式

派生选择器（后代选择器、子元素选择器和相邻兄弟选择器）：

后代选择器: 以空格分隔

div ul li {color:#0099cc;}

子元素选择器: 以>分隔

div >ul li

相邻兄弟选择器: 以+分隔

div + div ul li

最后一个就是组合选择器，以逗号隔开

h1, h2, h3, h4, h5, h6 { color: green }

好了，css基础就给大家介绍到这里，有什么不懂得地方可以给小编留言，如果您有什么好的建议也可以关注小编，我们共同学习，共同讨论，共同进步，接下来我们会介绍下css的属性，敬请期待吧

*******HTML********

**Web服务本质**

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8080))

sk.listen(5)

while True:

conn, addr = sk.accept()

data = conn.recv(8096)

conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http协议简化

conn.send(b"<h1>Hello world!</h1>")#发送内容

conn.close()

sk.close()

浏览器发送请求-->HTTP协议-->服务器接受请求-->服务端返回响应-->服务端把HTML文件内容发送给浏览器-->浏览器渲染页面

What HTML?

*超文本标记语言（Hypertext Markup Language，HTML）是一种用于创建网页标记语言

*本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的页面。

对于不同的浏览器，对于同一个标签可能会有不同的解释。（兼容性问题）

*网页文件的扩展名：.html或.htm

*HTML是一种标记语言，他不是一种编程语言，HTML使用标签来描述网页。

****HTML文档结构****

*最基本的HTML文档**

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

#解释

1.<!DOCTYPE html>声明为HTML5文档

2.<html></html>是文档的开始标记语言和结束标记，是HTML页面的根本元素，在他们之间是文档的头部(head)和主题(body)

3.<head></head>定义了HTML文档的开头部分。他们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据

4.<title></title>定义了网页标题，在浏览器标题栏显示

5.<body></body>之间的文本是可见的网页主体内容

注意：

对于中文网页需要使用<meta charset='utf-8'>声明编码。否则会出现乱码。这些浏览器会设置GBK为默认编码，则需要我们设为

****HTML标签格式****

*HTML标签是由尖括号包围的关键字

*HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。

*也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等。

*标签里面可以有若干属性，也可以不带属性。

****标签的语法

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

<标签名属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

id：定义标签的唯一ID，HTML文档树中唯一

class：为html元素定义一个或多个类名（classname）(CSS样式类名)

style：规定元素的行内样式（CSS样式

****HTML注释

****<!DOCTYPE>标签****

<!DOCTYPE> 声明必须是HTML文档的第一行，位于<html>标签之前

<!DOCTYPE> 声明不是HTML标签，他是指示web浏览器关于页面使用哪个HTML版本进行编写的指令

****HTML常用标签****

**head内常用的标签**

1.<title></title> 定义网页的标题

2.<style></style> 定义内部样式表

3.<script><script>定义JS代码或引入外部JS文件

4.<link/> 引入外部样式文件

5.<meta/>定义网页原信息

****Meta标签

Meta标签介绍：

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不

同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示

网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

2.names属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎

机器人查找信息和分类信息用的

******body内常用表标签******

****基本标签（块级标签和内联标签）****

<br>

<hr>

****特殊字符****

空格------

>-------->

<--------<

&--------&

￥--------¥

版权(©️)---©

****div标签和span标签****

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别：

所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签，p标签也不能包含p标签。

****img标签****

****a标签****

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，

也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，

甚至是一个应用程序。

什么是URL？

URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。

URL举例

http://www.baidu.com/stu/index.html

http://111.13.100.91/stu/index.html

URL地址由4部分组成

第1部分：为协议：http://、ftp://等

第2部分：为站点地址：可以是域名或IP地址

第3部分：为页面在站点中的目录：stu

第4部分：为页面名称，例如 index.html

各部分之间用“/”符号隔开。

href属性指定目标网页地址。该地址可以有几种类型：

1.绝对URL-指向另一个站点（不如 href = 'https://www.baidu.com'）

2.相对URL-指向当前站点中确切的路径（href = 'index.html'）

3.锚URL-指向页面中的锚（href = '#top'）

target:

1._blank表示在新标签页中打开目标页面

2._self表示在当前标签页中打开目标页面

****列表*****

1.无序列表

</ul>

type属性：

1.disc（实心圆点，默认值）

2.circle（空心圆圈）

3.square（实行方块）

4.none（无样式）

2.有序列表

</ol>

type属性：

1.1数字列表，默认值

2.A大写字母

3.a小写字母

4.I大写罗马

5.i小写罗马

3.标题列表

<dl>

</dl>

****表格****

表格是一个二维数据空间，一个表格由若干行组成，一行又有若干单元格组成，单元格里面可以

包括文字。列表。图案。表单。数字符号。预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。

表格类数据是值最适合组织为表格格式（即按行和列组织）的数据

表格基本结构：

<table>

<thead>

<tr>

</tr>

</theaf>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

属性：

1.border：表格边框

2.cellpadding：内边距

3.cellspacing：外边距

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

5.rowspan：单元格竖跨多少行

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

****form（表单）****

功能；

表单用于向服务器传输数据，从而实现用户与web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等

表单还可以包含textarea、select、fieldest和lable标签

***表单属性

1.accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）

2.action 规定在何处提交表单的地址（URL）（提交页面）

3.autocomplete 规定浏览器应该自动完成表单（默认：开启）

4.enctype 规定被提交数据的编码（默认：url-encoded）

5.method 规定在提交表单时所用的HTTP方法（默认GET）

6.name 规定识别表单的名称（对于DOM使用：document.forms.name）

7.novalidate规定浏览器不验证表单

8.target规定action属性中地址的目标（默认_self）

***表单元素

基本概念：

HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。

表单一般用来收集用户的输入信息

表单工作原理：

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。

服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。

当数据完整无误后，服务器反馈一个输入完成的信息。

******input******

<input>元素会根据不同的type属性，变化为多种形态

type属性值表现形式对应代码

text单行输入文本<input type="text" />

password密码输入框<input type="password" />

date日期输入框<input type="date" />

checkbox复选框<input type="checkbox" checked="checked" />

radio单选框<input type="radio" />

submit提交按钮<input type="submit" value="提交" />

reset重置按钮<input type="reset" value="重置" />

button普通按钮<input type="button" value="普通按钮" />

hidden隐藏输入框<input type="hidden" />

file文本选择框<input type="file" />

属性说明：

1.name：表单提交时的“键”，注意和id的区别

2.value：表单提交时对应项的值

type = “button”，“reset”，“submit”时，为按钮上显示的文本信息

type = “text”，“password”，“hidden“时，为输入框的初始值

type = ”checkbox“，”radio“，”file“时，为输相关联的值

3.checked：radio和checkbox默认被选中的项

4.readonly：text和password设置只读

5.disabled：所有input均适用

******select标签******

</select>

</form>

属性说明：

1.multiple：布尔属性，设置后为多选，否则默认单选

2.disabled：禁用

3.selected：默认选中该项

4.value：定义提交时的选项值

******lable标签******

定义：<lable>标签为input元素定义标注（标记）

说明：

1.label元素不会向用户呈现任何特殊效果

2.<lable>标签的for属性值应当与相关元素的id属性值相同

<form>

</form>

******textarea多行文本******

默认内容

</textarea>

属性说明：

1.name:名称

2.rows:行数

3.cols:列数

4.disable:禁用

在线咨询

上一篇：web前端ajax笔记之一
下一篇：使用python的正则表达式的匹配规则P来匹配HTML标签及内容

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

网页设计HTML零基础入门

、Html概述

二、Html标签语法

1、成对标签

2、自闭合标签

三、Html基本架构

1、！DOCTYPE

2、html

3、head

4、meta

5、body

四、Html文档规范

五、Html注释

六、html基本属性

1.bgcolor

2.路径

3.background

七、Html标签

1.网页的组成

2、文本段落标签

3、文本控制标签

4、文本格式化标签

5、图片标签

6、audio

7、video

8、超链接

9、列表

1.有序列表

2、无序列表

3、描述列表

10、表格

10.1 基本使用

10.2 单元格合并

11、表单

11.1 基本使用

11.2 GET&POST

11.3 LABEL

11.4 INPUT

11.4.1 基本示例

11.4.2 调用摄像头

11.4.3 其他类型

11.4.4 HIDDEN

11.4.5 SUBMIT

11.4.6 禁用表单

11.4.7 PATTERN

11.4.8 TEXTAREA

11.4.9 SELECT

11.4.10 RADIO

11.4.11 CHECKBOX

11.4.12 FILE

11.4.13 日期时间

11.4.14 DATALIST

12、框架集

12.1 垂直框架

12.3 混合框架

12.4 导航框架

13、内联框架

您的项目需求