2022-08-22 第五组赖哲栋学习笔记

什么是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>

posted on 2022-08-22 21:14 小赖的博客阅读(43) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

2022-08-22 第五组 赖哲栋 学习笔记

什么是HTML

网页由谁来解析

HTML标签

什么是网页

HTML头部

HTML标签组成

超级链接

块级元素

行级元素

无序列表

有序列表

自定义列表

表格

内联框架

表单

实体Entity（转义字符）

HTML4与HTML5之间的关系

音频标签

视频标签

什么是CSS

css文本的链接方式

CSS选择器

伪类选择器

2022-08-22 第五组赖哲栋学习笔记