[网页编程]-02 HTML5 基本结构及标签
重点内容及常用标签
- HTML(Hyper Text Markup Language)：超文本标记语言 。
- HTML的主体结构有head标签 ,body标签
- charset 标签用于定义外部脚本文件中所使用的字符编码。
- title是文档的标题。
- meta 元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词。
- http-equiv属性:相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，中的内容其实就是各个参数的变量值。
- h1~h6 标签可定义标题。
- pre按照我们指定的格式输出。
- hr 会在屏幕中出现一道分割线。
基本结构级常用标签
参考代码
Head标签的子标签
<!DOCTYPE html>
<!--HTML中的文档约束（DTD）
HTML5的文档约束 <!DOCTYPE html>
HTML 4.01文档约束 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--搜索引擎优化-->
<meta name="author" content="朱自清，张三" />
<meta name="description" content="盼望着盼望着东风来了" />
<meta name="keywords" content="东风，盼望" />
<!--自动刷新网页-->
<meta http-equiv="refresh" content="5;http://www.chaoge.com" />
<!--禁止网页缓存 (了解)-->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="expires" content="0" />
</head>
<body>
</body>
</html>body中基本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--标题标签 h1-h6 自动的加粗加黑 会自动的换行 align:调整标签的位置 （默认是left） -->
【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园
<h1 align="right">【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h1>
<h2>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h2>
<h3>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h3>
<h4>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h4>
<h5>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h5>
<h6>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h6>
<!--<h7>【新时代·幸福美丽新边疆】西藏：代代接力守护绿色家园</h7>-->
<!--分割线标签 width：宽度 500px:像素 color:颜色 align:位置（默认center） size:垂直方向的大小 -->
<hr width="500px" color="red" align="left" size="20px"/>
<!--p段落标签 br:换行 空格-->
<p> 新华网阿里5月11日电（张宸 雪珍）55岁的白玛加布看着在<br />
玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑容。</p>
<p> 新华网阿里5月11日电（张宸 雪珍）55岁的白玛加布看着在<br />
玛旁雍错边飞舞的海鸥和欢呼的游客，脸上露出了欣慰的笑容。</p>
<!--预文本标签 按照我们指定的格式输出 （灵活性比较的大）-->
<pre>
新华网阿里5月11日电（张宸 雪珍）
55岁的
白玛加布 看着在
玛旁雍错边飞舞的海鸥
和欢呼的游客，脸上露出了欣慰的笑容
</pre>
</body>
</html>
body中基本标签2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--下划线标签-->
<u>好好学习</u>
<!--斜体标签-->
<i>好好学习</i>
<!--加粗加黑标签-->
<b>好好学习</b>
<!--删除线标签-->
<del>好好学习</del>
<!--上标标签-->
2<sup>3</sup>
<!--下标标签-->
log<sub>7</sub>
<!--字体变小标签-->
<small>好好学习</small>
<!--字体放大-->
<big>好好学习</big>
<!--字体标签 face：指定字体的风格-->
<!--好好学习-->
<font color="red" size="25px" face="宋体">好好学习</font>
<span>好好学习</span>
<hr />
<!--列表标签{[1]有序列表，[2]无序列表，[3]自定义列表}-->
<!--
作用：
【1】树形菜单
【2】导航栏的布局
-->
<!--[1]有序列表-->
<ol type="I">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ol>
<!--[2]无序列表-->
<ul type="square">
<li>javaSE</li>
<li>javaEE</li>
<li>javaME</li>
</ul>
<!--[3]自定义列表-->
<dl>
<dt>java</dt>
<dd>javaSE</dd>
<dd>javaEE</dd>
<dd>javaME</dd>
</dl>
<!--跑马灯标签-->
<marquee direction="right" scrollamount="40px">好好学习</marquee>
</body>
</html>网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
相关文章
-
[网页编程]-01 jQuery 简介
2023-12-27
67778 浏览
jQuery百度百科的描述jQuery_百度百科baike.baidu.com/item/jQuery/5385065?fr=aladdin关于版本目前最新的版本是3.50但是因为不兼容ie678所以暂时还是要选用1.0x的版本,主要还是因为不能确定用户的PC上的IE版本,用老版本IE的用户大有人在,比如政府部门,老电脑比较多,所以在开发过程中会偏向大众,选择1.0X版本,目前更新维护到1.12
-
[网页编程]-21 JavaScript 表单属性补充
2023-12-27
67443 浏览
readonly和disabled共同的特点:可以看到数据，但是不可以操作数据不同:readonly(只读):里面的数据是可以提交到后台disabled(不可用):数据无法提交到后台代码
-
[网页编程]-22 JavaScript 表单校验01 简单校验
2023-12-27
63520 浏览
1.需求:实现提交内容校验,空值提示错误(onsubmit)使用form中的onsubmit属性实现,主要是如果提交数据为空,不做参数传递注意点:需要给onsubmit属性提供返回值才能完成判断代码:
-
[网页编程]-22 JavaScript 表单校验02 多情况校验实操
2023-12-27
66440 浏览
首先是要完成的校验功能基础页面代码
注册页面
- [网页编程]-04 CSS 定位 2023-12-27 68360 浏览
定位分为绝对定位和相对定位(常用)固定定位,默认定位(这两个了解一下就好了)
- [网页编程] HTML+CSS+JavaScript 购物车搭建实操 2023-12-27 64607 浏览
之前的实操,是通过HTML+CSS实现了页面的呈现,但是页面仍旧是静态的,不能点击相关的按钮实现相关的效果,学了JavaScript之后,我们就可以对页面进行优化,具体效果如下实现代码CSS:.nav{height:30px;background-color:#f1f1f1;}.warp{width:1000px;margin:0pxauto;}.nav_ul1,.nav_ul2li{float:
- [网页编程]-01 CSS 简介(CSS3) 2023-12-27 65826 浏览
英文全称：CascadingStyleSheets层叠样式表（级联样式表）CSS（层叠样式表）_百度百科baike.baidu.com/item/CSS/5457?fr=aladdin为什么学习CSS(CSS的作用)[1]HTML虽然可以在一定程度.上修饰页面，但是页面的整体还是不够美观。[2]HTML进行网页的书写重复的代码比较多，后期的维护性不好。下方是完整学习的链接,也可以当做是API看待
- [网页编程]-23 JavaScript Prototype的使用 2023-12-27 65147 浏览
Prototype(原型列用法类似于java中的继承原型prototype相当于为该类创建一块公共的空间简单的原理请看下面代码
-
关注我们
扫一扫关注公众号
添加我为好友，拉您入交流群！
添加我为好友，拉您入交流群！
请使用微信扫一扫!
- [网页编程]-04 CSS 定位 2023-12-27 68360 浏览