第一章 HTML5基础

第一章 HTML5基础

什么是前端开发?

以一个网站为例包括网站设计、前端开发、程序开发
等。网站设计就是网站的外观,平面的东西。程序开发也
好理解就是功能实现。而前端开发,简单来说,就是把
平面效果图转换成网页,把静态转换成动态。它的工作包
括了:切图、写样式、做鼠标效果和图片切换效果等。而
优秀的前端开发可以保障实现这些效果的同时,即不能影
响网站的打开速度、浏览器兼容性还有搜索引擎的收录,
还可以让用户体验更加舒适,使网站在访问中显得更精细、
更用心。访客使用起来更简便。另外,现在前端工作还不
仅仅只是网页的制作,还有微网站、APP的制作,游戏制
作,例如可以将你开发的Web页面直接打包成手机使用的
APP应用,游戏的互动界面更是以前端开发技术为主。

什么是HTML

Hyper Text Markup Language(超文本标记语言)
HTML,即超文本标记语言,所谓标记,标记语言是一套标记标签,网页中的所有元素都是需要标记在网页中展示给用户的效果。不需要编译,直接由浏览器执行.不同于C语言,java语言等

什么是HTML5

万维网联盟的核心语言(W3C)、超文本标记语言(HTML)的第五次重大修改。HTML5 已经于2014年10月正式定稿。然而,大部分现代浏览器已经具备了某些HTML5支持。HTML5是web时代最前沿的技术。

第一章 HTML5基础_第1张图片

W3C
World Wide Web Consortium(万维网联盟)
成立于1994年,Web技术领域最权威和具影响力的国际中立性技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/
W3C标准包括
结构化标准语言(XHTML 、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript )

HTML5的优势

世界知名浏览器厂商对HTML5的支持
微软
Google
苹果
Opera
Mozilla
市场的需求
跨平台
第一章 HTML5基础_第2张图片

标签的语法

1、用一对英文< >括起来.
2、<>内部是英文符号,不同符号代表不同含义
3、标签不区分大小写
4、标签分类
A)、成对标签。比如


B)、空标签。比如


C)、带属性标签。比如

    HTML基本结构

    第一章 HTML5基础_第3张图片

    DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>title>
    	head>
    	<body>
    		
    	body>
    html>
    

    < body>、等成对的标签,分别叫开放标签和闭合标签
    单独呈现的标签(空元素),如


    ;意为用 / 来关闭空元素

    页面背景色或背景图

    DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>第一个页面title>
    	head>
    	<body bgcolor="yellowgreen" background="img/AAXAh9Z.jpg">
    		
    	body>
    html>
    

    网页的基本标签

    标题标签

    DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>标题标签title>
    	head>
    	<body>
    		<h1>星期一h1>
    		<h2>星期二h2>
    		<h3>星期三h3>
    		<h4>星期四h4>
    		<h5>星期五h5>
    		<h6>星期六h6>
    	body>
    html>
    

    换行标签


    DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>title>
    	head>
    	<body>
    		<p>p标签又叫段落标签,用来包含一段文字,内容会自动换行p>
    		<p>标签上下都会换行p>
    		奥术大师大所多
    		<p>近日,欧美多国猴痘疫情成为全球关注焦点。<br/>
    		截至目前,英国、美国、西班牙、葡萄牙、瑞典、意大利、加拿大等均出现猴痘病例。<br/>
    		5月20日,世界卫生组织报告:全球共有11个既往非流行的国家出现了猴痘病例,<br/>
    		其中大约有80例确诊病例、50例待确诊的疑似病例。p>
    	body>
    html>
    

    水平线标签


    DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>title>
    	head>
    	<body>
    		<p>p标签又叫段落标签,用来包含一段文字,内容会自动换行p>
    		<p>标签上下都会换行p>
    		<hr />
    		<p>近日,欧美多国猴痘疫情成为全球关注焦点。<br/>
    		截至目前,英国、美国、西班牙、葡萄牙、瑞典、意大利、加拿大等均出现猴痘病例。<br/>
    		5月20日,世界卫生组织报告:全球共有11个既往非流行的国家出现了猴痘病例,<br/>
    		其中大约有80例确诊病例、50例待确诊的疑似病例。p>
    
    	body>
    html>
    

    字体样式标签

    加粗:
    斜体:
    下划线:...
    
    
    <p>近日,<strong>欧美多国strong>猴痘疫情成为全球关注焦点。<br/>
    		截至目前,<em>英国、美国em>、西班牙、<b>葡萄牙b><i>瑞典i>、意大利、加拿大等均出现猴痘病例。<br/>
    		5月20日,世界卫生组织报告:全球共有11个既往非流行的国家出现了猴痘病例,<br/>
    		其中大约有80例确诊病例、50例待确诊的疑似病例。p>
    

    注释和特殊符号

    第一章 HTML5基础_第4张图片

    <p>
    			世界 卫生<> "组织报告:©全球共有11个既往非流行的国家出现了猴痘病例
    			
    		p>
    

    图像标签

    第一章 HTML5基础_第5张图片

    <img src="img/AAXAh9Z.jpg" alt="没有找到该图片" title="刘德华" height="200px" width="900px">
    图片的高度,宽度通常使用 px ,要注意比例,防止失真,可以只写一个
    

    图像与文本的对齐方式

    图像与文本居中对齐,还可以取
    top, bottom 值
    
    <img align="middle">
    
    <img src="img/AAXAh9Z.jpg" align="middle" alt="没有找到该图片" title="刘德华" height="200px" width="900px">
    图片的高度,宽度通常使用 px ,要注意比例,防止失真,可以只写一个
    

    链接标签(超链接)

    第一章 HTML5基础_第6张图片

    <p>
    			<a href="index.html" target="_blank">自己的主页a>
    			<a href="https://www.baidu.com">百度a>
    		p>
    		<a href="test01.html">
    			<img src="img/AAXAh9Z.jpg" >
    		a>
    

    HTML 链接 - target 属性

    使用 Target 属性,你可以定义被链接的文档在何处显示。

    在这里插入图片描述

    锚链接

    锚(显示在页面上的文本)
    

    提示:锚的名称可以是任何你喜欢的名字。

    提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效

    		
    		<a href="#bottom" name="top">直达底部a>
    		省略中间代码。。。
    		
    		<a href="#top" name="bottom">返回顶部a>
    

    功能性链接

    <p>
    这是邮件链接:
    <a href="mailto:[email protected]?subject=Hello%20again">发送邮件a>
    p>
    
    <p>
    <b>注意:b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
    p>
    

    滚动标签

    第一章 HTML5基础_第7张图片

    <marquee scrolldelay="500" direction="up">
    			喆今天又没有好好学习
    		marquee>
    

    列表

    什么是列表
    列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息
    列表的分类
    无序列表
    有序列表
    定义列表

    无序列表

    无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

    在这里插入图片描述

    <ul>
    			<li>宋及今天又迟到了li>
    			<li>刘鹏的袜子丢了li>
    			<li>却加以的牙掉了li>
    			<li>张强强的头掉了li>
    			<li>黄元今天忘吃药了li>
    		ul>
    

    有序列表

    同样,有序列表也是一列项目,列表项目使用数字进行标记。

    在这里插入图片描述

    <ol>
    			<li>宋级为何频频迟到li>
    			<li>刘鹏的袜子为何频频丢失li>
    			<li>却加以的牙为何而掉li>
    			<li>是人性的扭曲还是道德的沦丧li>
    			<li>敬请观看阿远的堕落之路li>
    		ol>
    

    定义列表

    自定义列表不仅仅是一列项目,而是项目及其注释的组合。

    自定义列表以

    标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
    开始。

    视频和音频

    如何实现在网页上播放视频和音频?
    第三方自主开发的播放器
    Flash
    HTML5媒体元素

    Web 上的音频

    audio 元素能够播放声音文件或者音频流。

    音频格式

    当前,audio 元素支持三种音频格式:

    IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
    Ogg Vorbis
    MP3
    Wav
    <audio src="img/我的好兄弟.mp3" controls>audio>
    
    属性

    第一章 HTML5基础_第8张图片

    <audio src="img/我的好兄弟.mp3" loop="loop" controls="controls" autoplay="autoplay" >audio>
    

    视频格式

    当前,video 元素支持三种视频格式:

    格式 IE Firefox Opera Chrome Safari
    Ogg No 3.5+ 10.5+ 5.0+ No
    MPEG 4 9.0+ No No 5.0+ 3.0+
    WebM No 4.0+ 10.6+ 6.0+ No

    Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

    MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

    WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

    第一章 HTML5基础_第9张图片

    预格式标签

    <pre>
    			<img src="img/AAXAh9Z.jpg" alt="">
    			猴痘主要在西非和中非地区流行,非洲大陆之外的首次猴痘疫情于2003年出现在美国。
    			2018年以来,
    			
    			
    			以色列、英国、新加坡等国在
    			
    			来自尼日利亚的旅客中发现猴痘病毒感染者。
    		pre>
    

    表格

    第一章 HTML5基础_第10张图片

    语法

    第一章 HTML5基础_第11张图片

    <table border="1px" height="500px" width="400px">
    			<tr>
    				<td>学号td>
    				<td>姓名td>
    				<td>成绩td>
    			tr>
    			<tr>
    				<td>1td>
    				<td>张三td>
    				<td>20td>
    			tr>
    			<tr>
    				<td>2td>
    				<td>李小浩td>
    				<td>59.5td>
    			tr>
    			<tr>
    				<td>3td>
    				<td>宋打折td>
    				<td>0.5td>
    			tr>
    		table>
    

    表格的表头

    表格的表头使用 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本:

    <table border="1px" height="500px" width="400px">
    			<tr>
    				<th>学号th>
    				<th>姓名th>
    				<th>成绩th>
    			tr>
    			<tr>
    				<td>1td>
    				<td>张三td>
    				<td>20td>
    			tr>
    			<tr>
    				<td>2td>
    				<td>李小浩td>
    				<td>59.5td>
    			tr>
    			<tr>
    				<td>3td>
    				<td>宋打折td>
    				<td>0.5td>
    			tr>
    		table>
    

    合并单元格

    colspan实现跨列

    rowspan实现跨行

    <table border="1px" height="500px" width="400px">
    			<tr>
    				<th>学号th>
    				<th>姓名th>
    				<th>成绩th>
    			tr>
    			<tr>
    				<td colspan="2">1td>
    				
    				<td>20td>
    			tr>
    			<tr>
    				<td rowspan="2">2td> 
    				<td>李小浩td>
    				<td>59.5td>
    			tr>
    			<tr>
    				
    				<td>宋打折td>
    				<td>0.5td>
    			tr>
    		table>
    

    尺寸

    单位 描述
    % 百分比
    in 英寸
    cm 厘米
    mm 毫米
    em 1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如,如果某元素以 12pt 显示,那么 2em 是24pt。在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。
    ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
    pt 磅 (1 pt 等于 1/72 英寸)
    pc 12 点活字 (1 pc 等于 12 点)
    px 像素 (计算机屏幕上的一个点)

    颜色

    单位 描述
    (颜色名) 颜色名称 (比如 red)
    rgb(x,x,x) RGB 值 (比如 rgb(255,0,0))
    rgb(x%, x%, x%) RGB 百分比值 (比如 rgb(100%,0%,0%))
    #rrggbb 十六进制数 (比如 #ff0000)

    你可能感兴趣的:(#,web前端,笔记,html5,前端,html)