本文探讨了HTML语言的基础结构，CSS样式的应用，以及浏览器内核在网页渲染中的关键作用，介绍了各类浏览器内核和排版引擎。同时，讲解了Web标准、HTML标签语义化和CSS样式的基本使用，对开发者来说是必备的实践指南。
1.开发工具
主要开发工具有 chrome显示,sublime书写,photoshop协助
2.浏览器内核
浏览器内核（Rendering Engine），是指浏览器最核心的部分，负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。
所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
1 内核分类
▪ Trident（内核）
▪ Gecko(firefox)
▪ Presto(opera)
▪ Webkit(safari)
▪ Blink(chorem)
2 排版引擎
▪ WebCore
▪ KHTML
3.Web 标准
1.Web 标准也称网页标准，它由一系列标准组成，这些标准大部分由 W3C 负责制订，也有一些标准由其他标准组织制定的，如 ECMA 的 ECMAScript 标准等。
2.主要由三部分组成:结构、表现和行为。
结构：使结构清晰，逻辑结构完整
表现;修饰样式
行为:内容交互操作效果
4.HTML骨架
html是一种超文本标记语言，是一种用于创建网页的语言
<!DOCTYPE HTML> 编码规范，告诉浏览器这是属于什么类型的文档，使用了哪个版本的HTML，不区分大小写
<meta charset="utf-8"> 声明编码方式，utf-8中文编码的一种，一些浏览器会设置默认的编码方式为gbk
html注释: <!-- -->
html的后缀有两种：
一、 .html 二 .htm 常见的大多数浏览器页面后缀都是 .html
html标签（html tag）:
html标签是由尖括号包围的关键字，<html>
html标签通常 成对出现，由<>开始到</>结束,<html>.....</html>
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
-
一个html文档必须标签：
-
<head>: html文档的头部包含
<title>:html标题
<meta> :描述一些基本的元数据，如网页的描述内容，作者，刷新页面，为搜索引擎定义关键字
<base> :描述基本的链接地址
<link> :定义文档与外部资源的关系，通常用于外部CSS样式的引用
<style> : 定义CSS样式，渲染html样式 -
单例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>- 标签分类
双标签：<head></head>
单标签：</br>
关系
- 嵌套
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
2、并列
<head></head>
<body>
6.文档类型
！DOCTYPE
字符集
utf-8最常用，还有gbk(中文字符)和gb2312
标签语义化的好处：
1. HTML结构清晰
2. 代码可读性较好
3. 无障碍阅读
4. 搜索引擎可以根据标签的语言确定上下文和权重问题
5. 移动设备能够更完美的展现网页（对css支持较弱的设备）
6. 便于团队维护和开发
7.排版标签
1.标题标签 head title
2.段落标签 <p>
3.水平线标签 </hr>
4.换行标签 </br>
8.div span avi
.div span 没有语义
在网页开发的时候使用div和span都可以，通常可以理解为没有什么区别。但注意的是div占用一行，span不会占用一行，内容占多大宽度，span就有多宽。
9.文本标签
- <b> <strong> 文字加增粗方式显示
- <i> <em> 文字以斜体方式显示
- <s.> <del> 文字以增加删除线式显示
- <u> <ins> 文字以下划线方式显示
- 10.图像标签img
Br hr img 三个单标签
- 基本图像插入方式<br> <img src=”” />
- 带有alt图像插入方式 <img src=”” alt=””/>
- 带有title图像插入方式 <img src=”” titlet=””/>
- 带widtht图像插入方式 <img src=”” alt=”” width=”400”/>
- 带边框图像插入方式 <img src=”” alt=”” width=”400” border=”10”/>
11.链接标签
<a href =”dhhhdhdhhdhdhdh”>百度</a.>
- 外部链接 需要添加http://百度
- 内部链接 直接连接内部网页<a href =”index。”>百度</a.>
- 没有确定值<a href =”i#”>百度</a.>
- 可以创建超文本
12锚点定位
- 使用<a href =”#id”>百度</a.>
- 使用id标注位置
- Base
base可以设置整体链接打开状态
14 特殊字符
； &ait %gt
15 注释标签
< !---ggf --->
- 路径
HTML 文件路径
文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到：
- 网页
- 图像
- 样式表
- JavaScript
绝对文件路径
绝对文件路径是指向一个因特网文件的完整 URL：
实例
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">
<img> 标签以及 src 和 alt 属性在 HTML 图像这一章做了讲解。
相对路径
相对路径指向了相对于当前页面的文件。
在本例中，文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件：
实例
<img src="/images/picture.jpg" alt="flower">
17.如何使用CSS
有以下几种方式：
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
-
1.内联样式
-
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。
<p style="color:blue;margin-left:20px;">这是一个段落。</p>2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>3.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>4.设置 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：
实例
<body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body>5.设置， 字体, 字体颜色 ，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
实例
<h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>6. 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
实例
<h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p>
18.列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
<ul>
<li>e</li>
<li>lk</li>
</ul>同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签
<ol>
<li>ee</li>
<li>lk</li>
</ol>列表项使用数字来标记。
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>ee</dt>
<dd>- b</dd>
<dt>Mi</dt>
<dd>- wh</dd>
</dl>19.表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格实例
实例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td> </tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>在浏览器显示如下：:
表格和边框属性
如果不定义边框属性，表格将不显示边框。
实例
<table border="1">
<tr>
<td>1, 1</td>
<td>1, 2</td>
</tr>
</table>20.区块
1.块元素： <div>,< p>,< ul>,<ol >,<dl> ,<h1>, <p>, <ul>, <table>
2. 行内元素 ： <span>,< a>,< em>,< i>,< b>
3.行内块元素： < img>,< input>,< textarea>
21. 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:
<form>
.
input 元素
.
</form>
文本域（Text Fields）
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。
1.密码字段
密码字段通过标签<input type="password"> 来定义:
<form action="www.baidu.com" method="post">
账号：<input type="text" name="" value="" />
密码：<input type="password" name="" value="" />
<input type="submit" value="提交"/>
</form> 注意:密码字段字符不会明文显示，而是以星号或圆点替代。
单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>2.复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
3.提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
扫一扫
1613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
