什么是HTML

  • HTML是用来描述网页的一种语言
  • HTML叫做超文本标记语言(Hyper Text MarkerUp Language)
  • 标记语言就是一套标记标签
  • HTML使用标记标签来描述网页

网页由谁来解析

  • 浏览器
    • IE
    • Firefox火狐浏览器
    • safari 苹果
    • Chrome 谷歌 -----业界标杆
    • Opera浏览器

HTML标签

  • HTML标记标签通常称为 HTML tag
  • HTML标签由成对出现的尖括号包围的关键词,比如
  • HTML标签通常是成对出现的,有例外,比如
  • 标签对中第一个标签是开始标签,第二个标签是结束标签,结束标签是由/结束的
  • 开始和结束标签也被称为开放标签和闭合标签

标题标签由h1-h6构成,超过这个范围则输出为普通文本

什么是网页

  • HTML文档描述的就是网页
  • HTML文档包含HTML的标签和纯文本
  • HTML文档就被称为网页

Web浏览器的作用是读取HTML文档,并以网页的形式显示出它们

浏览器不会显示HTML标签,而是使用HTML标签来显示网页的内容

HTML头部

head元素包含了所有的头部信息元素

  • title:定义了浏览器工具栏的标题,当网页被收藏到收藏夹,显示的默认标题,显示在搜索引擎结果页面的标签
  • base:描述了基本的链接地址/链接目录,作为HTML文档中所有的
  • link:引用css层叠样式表
  • style:定义css层叠样式表
  • script:既可以定义script脚本,也可以引用script文件。不建议写在head里,写在body的最下方
  • meta:元数据;指定网页的描述,关键词,文件的最后修改时间,作者。可以定义搜索引擎的关键词

HTML标签组成

  • 段落标签h1--h6
<h1>最大的标题h1</h1>
<h2>最大的标题h2</h2>
<h3>最大的标题h3</h3>
<h4>最大的标题h4</h4>
<h5>最大的标题h5</h5>
<h6>最大的标题h6</h6>
<h7>我是h7</h7> //如果超过了范围则会输出普通文本
  • 段落标签
<p>我的第一个段落</p>
  • 普通文本
我是一个普通的文本
  • 水平分隔符
<hr>
  • 换行符
<br>
  • 注释
<!-- 注释 -->
  • 图像链接
<img src="img/libai.jpeg" width="300" title="" alt="" align="bottom" border="1">后面的文本
<!-- align="bottom":把图像与底部对齐 -->
  • 其它
 <b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>
	池塘边的榕树下,
	知了在声声叫着夏天。
</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<del>删除线</del>
log<sub>5</sub>  //下标符
2<sup>3</sup> = 8 //上标符
<font color="green">我是font</font>
超级链接
  • 普通的链接
<a href="http://www.baidu.com" target="_self">百度一下</a><br>
<!-- taeget中的取值
		1、_blank:在新窗口打开
		2、_self:默认,在相同的框架打开
		3、_top:在整个窗口中打开
-->
  • 图像链接
<a href="http://www.baidu.com"><img width="150"
                src="img/libai.jpeg" alt="这是刺客李白" title="青莲剑仙"></a>
<!-- 
	点击图片进入对象网站
	src处输入图片的位置
	alt图片加载不成功时的提醒
	title鼠标悬停在图片时的提醒
-->
  • 邮件链接
<a href="mailto:123456@qq.com">站长信箱</a>
  • 锚记链接
 <a id="tips">提示部分</a>

        <a href="#tips">跳到提示不分</a>
块级元素
块级元素:自占一行,自带换行功能
div,h,p,form,ul,ol...
行级元素
行级元素:自己没有换行功能
a,span,del,sub,sup,em,b,strong....
无序列表
		 <ul type="disc">
            <li>项目1</li>
            <li>项目2</li>
        </ul>
有序列表
		<ol type="I">
            <li>项目1</li>
            <li>项目2</li>
            <li>项目3</li>
            <li>项目4</li>
        </ol>
自定义列表
		<dl>
            <dt>项目1</dt>
            <dd>描述项目1</dd>
            <dt>项目2</dt>
            <dd>描述项目2</dd>
        </dl>
表格
	<table border="1" cellpadding="10" cellspacing="0" width="400">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>联系方式</th>
                    <th>毕业院校</th>
                    <th>国籍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1001</td>
                    <td>罗永浩</td>
                    <td>13635412586</td>
                    <td>延边第二中学</td>
                    <td rowspan="4">中国</td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>罗翔</td>
                    <td>13125693254</td>
                    <td>北京大学</td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>樊登</td>
                    <td>13326956541</td>
                    <td>西安交通大学</td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>雷军</td>
                    <td>15619851265</td>
                    <td>武汉大学</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">
                        备注:他们都是有钱人。
                    </td>
                </tr>
            </tfoot>
        </table>
<!--
	cellpadding 	设置单元格内容与单元格边框之间的空白距离(内间距)
	cellspacing     设置单元格与单元格边框之间的空白间距
	border="1"		规定表格单元是否拥有边框 (1代表有)
-->
内联框架
	<iframe src="https://www.sina.com.cn" height="600" width="400"
            frameborder="0"></iframe>
表单
		<!-- 
			action:数据的提交后台地址
			method:数据的提交方式
				get:默认值,会把所有要提交的数据拼接在地址栏
				post:封装一个请求体,把数据提交给后台,不会拼接在地址栏
			
			disabled和readonly的区别?
			1、作用范围不同:disabled属性可以用于所有的表单元素;readonly属性只对input(text / password)和textarea有效
			2、对元素的影响程度不同:disabled属性阻止对元素的一切操作;readonly属性只是将元素设置为只读,其他操作正常
			3、表单提交:disabled属性可以让表单元素的值无法被提交;readonly属性则不影响提交问题
        -->
		<form action="" method="post">
            <p>
                账号:<input type="text"> <!--文本框-->
            </p>
            <p>
                密码:<input type="password"> <!--密码框-->
            </p>
            <p>
                性别:
                <input type="radio" name="gender">男  <!--单选框   checked:默认-->
                <input type="radio" name="gender" checked>女
            </p>
            <p>
                地址:
                <select>
                    <option value="">请选择省</option>  <!--下拉框-->
                    <option value="">吉林省</option>
                    <option value="">北京市</option>
                </select>
                <select>
                    <option value="">请选择市</option>
                    <option value="">长春市</option>
                    <option value="">北京市</option>
                </select>
                <select>
                    <option value="">请选择区</option>
                    <option value="">南关区</option>
                    <option value="">西城区</option>
                </select>
            </p>
            <p>
                爱好:
                <input type="checkbox" checked>读书  <!--复选框-->
                <input type="checkbox">游泳
                <input type="checkbox" checked>跑步
            </p>
            <p>
                <textarea cols="30" rows="10"></textarea>  <!--文本域-->
            </p>
            <p>
                邮箱:<input type="email">  
            </p>
            <p>
                薪水:<input type="number">
            </p>
            <p>
                电话:<input type="tel">
            </p>
            <p>
                隐藏:<input type="hidden">
            </p>
            <p>
                <!-- <input type="submit">    
                <input type="reset">
                <input type="button" value="自定义按钮">
             -->
                <button type="submit">注册</button>
                <button type="reset">重写</button>
                <button type="button">自定义</button>
               <!--submit:提交    reset:重置    button:自定义 -->
               <!-- 
                    我们项目的要求:
                    如果有form,用input
                    如果没有form,用button
                 -->
            </p>
        </form>

	<form action="aaa">
        <input type="text" autofocus required>
        <input type="image" height="20" src="./img/baidu.png">
        <br>
        <input type="number" step="100" min="1000" max="6000">

        <input type="text" pattern="[A-Za-z]{3}" placeholder="请输入英文字符">
        <input type="submit">
    </form>
				<!-- 
					autofocus 自动聚焦
					required 必须填写
					min 最小取值
					max 最大取值
					step 设置每次添加量
					pattern 设置输入值的类型和数量
					placeholder 提示的文字
                 -->

实体Entity(转义字符)

	&nbsp; 空格
    &amp; &符号
    &lt; 小于号
    &gt; 大于号
    &copy; 版权号

HTML4与HTML5之间的关系

  • HTML4.01中的几个标签已经被废弃,这些元素在HTML5里有的被删除了,有的被重写定义
  • HTML5新增:画布,多媒体,重力感应,地图
  • HTML5 浏览器兼容性 IE9之前几乎不支持H5
音频标签
新:<audio src="123.mp3" autoplay controls></audio>
<!-- 
	autoplay :自动播放
	controls:显示播放插件
-->
旧:<audio>
        <source src="">
   </audio> -->
视频标签
新版本:<video src="123.mp4" autoplay controls></video>
旧版本:<video >
            <source src="">
        </video>

什么是CSS

  • html提供了布料,css上色
  • CSS层叠样式表
  • 定义如何显示HTML元素--样式
  • 样式通常存储在样式表中
  • 把样式表添加到HTML中,内容与表现分离(样式和结构分离)
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在css文件中

css文本的链接方式

  • 行内样式

    • <p style="background-color: red;">我是P标签</p>
      
  • 内联样式

    • 写在head内

    • <head>
      	<style>
      		h1 {
      			background-color: green;
              }
              span{
                  background-color: yellow;
              }
          </style>
      </head>
      
  • 外部样式

    • 创建了一个.css文件,在head里连接

    • <head>
      	<link rel="stylesheet" href="css/style.css">
      </head>
      

CSS选择器

 <style>
     /* 类选择器 */
     .fontStyle {
         color: red;
         font-size: 20px;
     }
     .backgroudStyle {
         background-color: yellow;
     }
</style>
<!-- 
	CSS选择器
	选择你想要的元素
-->
<!-- 在使用类选择器选择css样式时,可以选择多个,中间用空格隔开即可 -->
<p class="fontStyle backgroudStyle">我爱你中国!</p> 
/* id选择器,每个标签元素的id是唯一不能重复 */
     #fontStyle2 {
         color: blue;
         font-size: 30px;
     }
</style>
	<p id="fontStyle2">我爱你长春!!!</p>
<style>  
    /* 标签选择器 */
    h1 {
        font-family: "仿宋";
    }
</style>
<h1>我是h1标签</h1>
 <style>  
 /* 通配符,全部选择器
	 用于:页面初始化
*/
     * {
         margin:0;
         padding: 0;
     }
</style>
 <style>  
	/* 组合选择器 */
     h1,div {
         font-size: 50px;
         }
</style>

 <style>  
	/* 后代选择器 */
     div p {
         background-color: red;
     }
</style>

 <style>  
	/* 子选择器 */
     div>p {
         color: blueviolet;
     }
</style>

 <style>  
	/* 紧跟着div的p元素 */
     div + p{
         background-color: pink;
     }
</style>
 <style>  
	/* 属性选择器 */
     input[name]{
         height: 100px;
         font-size: 50px;
     }
     input[name=username] {
         color: red;
     }
</style>

<input type="text" name="username">
<input type="password" name="password">
伪类选择器
<style>
    /* 初始状态 */
    a:link {
        color: red;
    }
    /* 鼠标悬停 */
    a:hover {
        color: green;
    }
    /* 激活状态 */
    a:active{
        color: black;
    }
    /* 访问过的 */
    a:visited {
        color: yellow;
    }
    /* 获得焦点 */
    input:focus {
        height: 100px;
        font-size: 50px;
    }
</style>