#前端 HTML

超文本标记语言(HyperText Markup Language),用于描述创建网页,由浏览器来解析。HTML文档也称web页面,包含HTML标签(<>包起,成对出现)及文本内容。

image.png

相关资源:
1.HTML实例
https://www.runoob.com/html/html-examples.html
2.HTML注解
https://www.runoob.com/tags/html-reference.html
3.HTML、CSS、JS在线编辑
https://c.runoob.com/front-end/61/

零、基础
——————————————————————————
注释
<!DOCTYPE> 定义文档类型,不区分大小写
<a> 定义超文本链接
<abbr> 定义缩写
<applet> 定义嵌入applet

定义换行
<center> 居中文本
<h1> to <h6> 定义HTML标题
<head> 定义文档信息
<html> 定义HTML稳定
<input> 定义输入控件
<label> input元素的标注
<link> 定义外部资源
<meta> 定义HTML文档元信息
<object> 定义内嵌对象
<p> 定义段落
<script> 定义客户端脚本
<select> 定义下拉列表
<style> 定义文档样式信息
<td> 定义表格的单元
<th> 定义表头单元格
<thead> 定义表头内容
<tr> 定义表格中的行
<tt> 定义打字机文本

一、元素
——————————————————————————
HTML元素以开始标签(如<p>)起始,以结束标签(如</p>)终止。空元素(没有内容,如
)以开始标签的结束而结束。在XHTML\xml\未来版本的HTML中,所有元素都要关闭,空元素的开始标签要添加斜杠(如
)。
1.链接
<a href="https://www.runoob.com">这是一个链接</a>
href属性指定链接地址。
2.图像
<img loading="lazy" src="/images/logo.png" width="258" height="39" />
图像名及尺寸以属性提供。

二、属性
——————————————————————————
属性值应该包括在引号内(单双引号都行)
常用属性:
①class:为元素定义类名
②id:定义元素唯一id
③style
④title

三、标题
——————————————————————————
标题不应用于大号文本,因为搜索引擎基于标题为网页结构和内容编制索引。


创建水平分割线。

四、段落
——————————————————————————
连续的空格、换行会被算作一个空格、换行。

五、格式化
——————————————————————————

六、链接
——————————————————————————
1.target属性定义被链接文档在哪里显示:
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
在新窗口打开文档。
2.id属性创建HTML文档书签:
<a id="tips">有用的提示部分</a>
<a href="#tips">访问有用的提示部分</a> // 文档中创建一个链接到(id="tips")
<a href="https://www.runoob.com/html/html-links.html#tips"> // 从另一个页面创建一个链接到(id="tips")
3.始终将正斜杠添加到子文件夹,如href="http://www.w3school.com.cn/html/",这样能加快网站载入。因为末尾加正斜杠会告知浏览器现在指向一个目录,浏览器会直接读取该目录的index\home等默认文件。没有加正斜杠,如href="http://www.w3school.com.cn/html"会向服务器产生两次HTTP请求,浏览器会先尝试读取根目录下的文件,再尝试查找同名的目录。
4.单词之间空格使用 %20 代替,以确保浏览器可以正常显示文本。

七、头部
——————————————————————————
1.<head>包含所有头部标签元素:<title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。其中,可以插入脚本(scripts),样式文件(CSS),以及各种meta信息。
2.<base>定义页面中所有链接默认的目标地址。
3.<title>定义浏览器工具栏的标题、网页在收藏夹的标题、显示在搜索引擎结果页的标题。
*4.<link>定义文档与外部资源的关系,常用语链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5.<style>定义了HTML文档的样式文件引用地址,也可直接添加样式来渲染HTML:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
6.<meta>指定网页的描述、关键词、文件最后修改时间、作者等元数据。元数据可用于浏览器加载页面、搜索引擎(关键词)以及其他Web服务。
实例:
①为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
②为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
③每半分钟刷新页面:
<meta http-equiv="refresh" content="30">
7.<script>用于加载脚本

八、CSS
——————————————————————————
CSS(Cascading Style Sheets)用于渲染HTML元素标签样式。
1.CSS有三种方式添加到HTML:
①内联样式 通过style属性,如<p style="color:blue;margin-left:20px;">这是一个段落。</p>;
②内部样式表 <head>使用<style>元素包含CSS,单个文件的样式都会改变,如下;
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
③外部引用 引用外部CSS文件,很多页面需要用到该样式时,最好使用这种方式。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

九、图像
——————————————————————————
<img>是空标签,只通过src属性指定图像URL位置;alt属性用于图像无法载入时显示文本信息。

十、表格
——————————————————————————
<table>元素定义表格,表头由<th>定义,各行由<tr>定义,单元格由<td>定义。

十一、列表
——————————————————————————
<ul>声明无序列表,元素用<li>定义;<ol>声明有序列表。

十二、区块
——————————————————————————
1.大多HTML元素定义为块元素-block-level(<h1>, <p>, <ul>, <table>)或内联元素-inline(<b>, <td>, <a>, <img>),块元素常以新行开始。
2.<div>用于组合HTML元素,可与CSS一同使用对内容块设置样式属性。
3.<span>为内联元素,用作文本容器,可与CSS使用,为部分文本设置样式属性。

十三、布局
——————————————————————————
1.页面布局可用<div>或<table>描述,网站将内容安排到多个列中,CSS用于对元素定位及设置样式。不过表格目的是呈现表格化数据,表格不是布局工具。
2.CSS的好处在于,编辑CSS外部样式代码,可统一维护所有页面的布局。

十四、表单
——————————————————————————
1.表单由<form>定义,是一个包含表单元素的区域,表单元素(文本域、下拉列表、单复选框)允许用户在表单中输入内容。
2.输入元素由<input>定义,类型由<type>定义(有text, password, radio, checkbox, submit, button)。
3.<fieldset>定义一组带边框的表单元素。

十五、框架
——————————————————————————
框架可以内嵌显示多个页面,由<iframe>定义。

十六、颜色
——————————————————————————
1.HTML颜色由红绿蓝组合而成,由十六进制符号定义,每个颜色的值为0~255。
2.计算机以前只支持256种颜色,Web安全色有216种(Micro和Mac有40种独立系统色),因此跨平台216安全色能确保所有计算机能显示。

十七、颜色名
——————————————————————————
颜色名由CSS和HTML定义(17标准色+124,一共141个)

十八、颜色值
——————————————————————————

十九、脚本
——————————————————————————
1.JavaScript使得HTML页面具有更强的动态和交互性。
2.<script>插入JS脚本(可含脚本语句,也可通过src指向外部脚本文件),不支持JS的浏览器会使用<noscript>中的文本替代。
3.JS常用语图片操作、表单验证、事件响应及内容动态更新。

二十、字符实体
——————————————————————————
1.HTML的预留字符必须使用字符实体来替代。
2.字符实体格式&entity_name或&#entity_number(如小于号为< , &#60, <)
3.连续空格要用&nbsp,否则浏览器会自动截短。
4.实体名对大小写敏感。
5.变音符可结合字母、数字使用(如a&#768为 à)
符号实体参考:
https://www.runoob.com/html/html-entities.html

二十一、URL
——————————————————————————
1.URL(Uniform Resource Locators)可用网站域名或IP地址定义。
2.浏览器通过URL向Web服务器请求页面,URL定位到万维网上的文档(网页或资源文档)。
3.网址语法规则:
scheme://host.domain:port/path/filename
①scheme 定义Internet服务类型,如http;
②host 定义域主机,http默认主机为www;
③domain 定义Internet域名,如baidu.com;
④:port 定义主机上的端口号;
⑤path 定义服务器上的路径(省略则文档位于网站的根目录);
⑥filename 定义的文档名;
4.URL只能用ASCII字符集,非ASCII字符由%后跟两位HEX数来替换,URL不能包含空格,空格常用+来替换。

二十二、速查列表
——————————————————————————
常用HTML模板大全(基本文档、基本标签、文本格式化、链接等):
https://www.runoob.com/html/html-quicklist.html

二十三、标签简写&全称
——————————————————————————
标签简写及全称对应表大全:
https://www.runoob.com/html/html-tag-name.html

二十四、总结
——————————————————————————
1.HTML的关键是标签,用于指示内容显示。
2.进阶技术:
CSS -- 同时控制多重网页的样式和布局,将格式化从HTML中剥离;
JavaScript -- 静态页面只能展示内容,若要支持用户交互的动态页面需要JavaScript;
3.网站托管服务器的考虑因素:
①支出:硬件、软件、人工;
②Internet服务提供商(ISP):24小时支持、每日备份、流量、带宽或内容限制、Email短信功能、数据库访问;

二十五、XHTML
——————————————————————————
1.XHTML是以XML格式编写的HTML。
2.由于移动端或其他小型设备缺乏理解不安规则编写的HTML代码,XHTML的良好格式可以改善该问题。
3.XHTML与HTML的区别:
文档结构
①DOCTYPE是强制的;
②<html>的namespace属性是强制的;
③<html>, <head>, <title>, <body>也是强制的;
元素语法
①元素必须正确嵌套;
②元素必须关闭;
③元素必须小写;
④文档要有一个根元素;
属性语法
①属性要使用小写;
②属性值要用引号包围;
③禁止属性最小化;

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,002评论 6 509
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,777评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,341评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,085评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,110评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,868评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,528评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,422评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,938评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,067评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,199评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,877评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,540评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,079评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,192评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,514评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,190评论 2 357

推荐阅读更多精彩内容