复习篇 HTML基础部分 20200714

最新推荐文章于 2024-09-12 18:22:06 发布

小白追梦

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量132

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/weixin_43815680/article/details/107329694

版权

HTML 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1、.html 和 .htm 都是可以的页面调试快捷键 F12
HTML 指的是超文本标记语言: HyperText Markup Language
在这里插入图片描述
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容

2、标签
标题 <h1> <h6> <h1>这是一个标题</h1>
段落 <p> <p>这是一个段落。</p>
链接 <a> <a href="https://www.runoob.com">这是一个链接</a>
图像 <img> <img src="/images/logo.png" width="258" height="39" />
上标和下标

<sub>ppx</sub>;
	 	<sup>ccx</sup>;

<link>标签   定义了文档和外部资源之间的关系  通常用于链接到样式表
<link rel =" stylesheet"    type = "text/ css"    href = "mystyle.css"

<style>  标签   直接渲染CSS 样式
	<style type="text/css">
		body{
			background-color:yellow;
			
		}
	</style>

<meta>  标签
  1） 为搜索引擎定义关键词
   <meta name = "keywords"   content  = "HTML, CSS, XML, XHTML, Javascript"
   2)  为网页定义描述内容
   <meta name = "description"   content = "免费 Web &  编程  教程"
   3）定义网页作者
   <meta name = "author"    content = "Runoob"
   4)  每30秒刷新当前页面
   <meta http- equiv = "refresh"  content = "30">

HTML head 元素
标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

3、 HTML CSS 样式

1）  内联样式  
		<body>
	 <p style="color:blue;margin-left:20px;">这是一个段落</p>	
</body>

2） 再加一个背景颜色
<body>
	 <p style="color:blue;margin-left:20px;">这是一个段落</p>	
</body>

3）
<body>
	 <h1 style="font-family:verdana;">一个标题</h1>  font-family  字体 
	   font-size  字体大小   arival 是互联网通用字体
	 <p style="font-family:arival;color:red;font-size:20px;">一个段落</p>
</body>

4）居中展示 
	 <h1 style="text-align:center">一个标题</h1>

5） 内部样式表（内联 单个文件） 外部样式表（外联）
	<style type="text/css">
		body{
			background-color:yellow;
		}
		p{
			color:blue;
		}
	</style>
外联（多个文件）
	<link rel="stylesheet" type="text/css" href="mystyle.css">

6）HTML  图像  img是空标签 只包含属性
   要在页面显示图像需要  src源属性  src 值得是source 原属性的值是图像URL地址
	<img src="URL" alt="some_text">  
	alt 当页面显示不出来图片的时候显示文字代替图片

并且 设置宽度（Width） 高度（Height） 是个好习惯
	<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

7） HTML 表格 
<table>  作用是显示表格化的数据 
  <table>  标签定义   每个表格均有若干行 <tr>定义   每行分为若干单元格 <td>标签定义   
    td 指的是 table data   数据单元格的内容  
    	包含文本，图片，列表，段落，表单，水平线，表格等
    		<table border="1"> border设置边框  不写默认没有边框
		<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>

表格表头
默认加粗显示在最上面
在这里插入图片描述

8）  HTML 列表 
    1） 无序列表   常用的方式  不过会去掉小圆点 
	<ul>
		<li>Coffee</li>
		<li>Milk</li>	
	</ul>

在这里插入图片描述

2） 有序列表
	<ol>
		<li>Coffee</li>
		<li>Milk</li>
	</ol>

在这里插入图片描述

3）自定义列表
以<dl> 标签开始  每个自定义列表项以<dl>   每个自定义列表项定义以<dd>开始
	<dl>  最外层
		<dt>Coffee</dt>  里面两个兄弟标签
		<dd>-black hot drink</dd>
		<dt>Milk</dt>
		<dd>-while cold drink</dd>
	</dl>

9）  HTML 区块 
  html 可以通过<div> 和 <span> 将元素组合起来

块级元素 
以新行开始结束  
<h1>   <p>  <ul>   <table> <div>

内联元素 
不会以新行开始
<b>  <td>  <a>  <img>  <span>

<div>[块级元素]   主要对大的内容块设置样式属性
<span>[内联元素] 主要对部分文本设置样式属性

10）布局
<div> 布局（主要用这个）和 <table>布局

	<div id="container" style="width:500px">
		<div id="header" style="background-color: #FFA500;">
			<h1 style="margin-bottom:0">主要网页标题</h1>
		</div>
		<div id="menu" style="background-color:#FFD700; height:200px;width:100px;float:left;">
			<b>菜单</b><br>
			HTML<br>
			CSS<br>
			JavaScript<br>
		</div>
		<div id="content" style="background-color: #EEEEEE;height: 200px;width: 400px;float: left">内容在这里</div>
		<div id="footer" style="background-color:#FFA500;clear:both;text-align:center"></div>
	</div>

在这里插入图片描述

11） 表单    <form>
输入标签<input>
1、文本域（Text Fields）
<form>
	First name: <input type="text" name="firstname"><br>
	Last name: <input type="text" name="lastname">
	</form>

实现效果如下
在这里插入图片描述

2、密码字段  (password)
<form>
		Password: <input type="password" name="pwd">
	</form>

显示的是一个密码框输入的内容都是小黑点

3）单选按钮（radio buttons）
<form>
		<input type="radio"  name="sex" value="male">Male<br>
		<input type="radio" name="sex" value="female">Female
	</form>

显示效果
在这里插入图片描述

4）复选框（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>

显示效果
在这里插入图片描述

5)提交按钮 (submit button)
<form>
		Username: <input type="text" name="user">
		<input type="submit" name="" value="submit">
	</form>

实现效果

在这里插入图片描述

6）下拉菜单
	<form action="">
		<select>
		<option value="beijing">beijing</option>
		<option value="shanghai">shanghai</option>
		<option value="guangzhou">guangzhou</option>
		</select>
	</form>

实现效果
在这里插入图片描述

12）框架
通过使用框架 可以在同一个浏览器窗口显示不止一个页面
1、lframe 语法
<lframe src="URL"></lframe>
2、设置高度和宽度   
// test.html 来自另外一个html文件
<iframe	src="test.html" width:200px height:200px></iframe>
	<p>一些旧的浏览器不支持iframe</p>
	<p>如果浏览器不支持iframes则不会显示</p>

显示效果
在这里插入图片描述

3、移除边框
<iframe src="test.html" width:200px height:200px frameborder="0"></iframe>

显示效果
在这里插入图片描述

4、使用ifame 显示目标链接页面
<iframe src="test.html" name="iframe_a"></iframe>
	<p><a href="http://www.baidu.com" target="iframe_a">baidu.com</a></p>

target 需要等于name
实现的效果
在这里插入图片描述

13）HTML 颜色
颜色表
在这里插入图片描述
颜色名、
https://www.runoob.com/html/html-colornames.html
颜色值
https://www.runoob.com/html/html-colorvalues.html

14）、HTML  脚本
<script></script>
无法使用或者被禁用的时候 用  <noscript></noscript>

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<body>
	
	<h1>Javascript</h1>
	<p id="demo"> Javascript可以触发事件，就像按钮点击</p>	
    <button type="button" onclick="myFunction()">点我</button>//设置一个按钮标签
</body>
</html>

<script type="text/javascript">
	//网页显示
	document.write("<p>这是一个段落</p>");
	//事件响应
	function myFunction() {
		document.getElementById("demo").innerHTML="Hello Javascript!";//选中后写入
	}
	
</script>

<body>
	

	<p id="demo"> Javascript可以改变样式</p>	
    <button type="button" onclick="myFunction()">点我</button>
</body>
</html>

<script type="text/javascript">

	//事件响应
	function myFunction() {
		x=document.getElementById("demo"); //找到元素
		x.style.color="#ff0000";           //改变样式
	}
	
</script>