h5学习（一）

最新推荐文章于 2024-06-17 22:13:35 发布

想变强的小白

最新推荐文章于 2024-06-17 22:13:35 发布

阅读量154

点赞数 2

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_44980725/article/details/117431788

版权

HTML(超文本标记语言)

作用：创建网页并添加网页内容相比以前版本的区别：更加严格

如何书写HTML5.0标准网页

1.创建文件，后缀一定是.html(旧版本网页 .htm)

2.文件第一行加一句声明

 <!DOCTYPE html> <!--声明当前网页是按照HTML5.0的标准来书写的-->

3.中间基本结构体

<html>           <!--根标签，在文件中最外标签-->
    <head></head><!--网页头部标签：全局定义 编码-->
    <body></body><!--网页主体：用户可见区域-->
</html>

4.书写完成后网页如何运行(浏览器)

pc端常用浏览器：谷歌chrome，火狐，safari

移动端浏览器：safari，chrome

浏览器内核（内核在浏览器内部用于渲染和解析htm；css模块）

浏览器内核

IE Trident

Chrome WebKit

Safari WebKit（Blink WebKit升级）

HTML:HyperText Markup Language 超文本标记语言

文本：文字数字

超文本：在文本的基础上添加图片，声音，动画，视频超越了文本的限制

标记：标签，标记，元素 <关键词>

标记分类

（1）单标记 <关键字>

<br><input type="text">

（2）双标记 <关键字></关键字>

 <form></form> <div></div>

标签嵌套

在双标签的内容部分，编写其他标签，形成功能叠加

<div>
      <div>
         <img>
       </div>
    </div>

注意：

1:嵌套要有顺序不乱顺 <div> <div></div></div>

2:嵌套代码要缩进--美观二个空格

3:在书写标签中关键字字母小写

标记中属性和属性值

<head></head>

可以通过属性和属性值增加标签功能

(1)通用属性:每个标签都可以使用属性

id:给标签创建一个唯一标识(编号) 在网页中唯一

style:给标签添加内联样式网页美化

class:引入样式名网页美化

（2）专用属性:针对某个标签使用属性

<!--输入框-->
    <input type="text" value="">

1.基本标签

  <!DOCTYPE html>   

  <html>

    <head></head> 

    <body></body> 

  </html>

2.head 头部标签

定义全局标签功能特殊

<!DOCTYPE html>
<html>
  <head>
    <title>学习</title>
	<meta charset="utf-8">                  <!--指定网页显示编码-->
	<meta name="description" content="1">   <!--网页介绍-->
	<meta name="keyword" content="2">       <!--网页关键字-->
  </head>
  <body>
    网页设计三剑客:HTML+CSS+JavaScript
	<div>
	     <div id="box1" class="base" style="font-size:50px;">
		 MySQL</div>
	  </div>
	</div>
  </body>
</html>

3.body 标签

网页主题内容，浏览器中可见部分

专用属性：bgcolor 指定body标签背景颜色

text 指定body标签文字颜色

html5标准中规定所有外观修饰都要通过css来完成

<!DOCTYPE html>
<html>
  <head>
     <title>练习</title>
	 <meta charset="utf-8">
  </head>
  <body style="background-color:#eee;color:#000;">
     主体
  </body>
</html>

4.文本类型标签

此类标签中间的内容是文本字符串

(1)标题 <h1>标题..</h1><h2>标题..</h2>..<h6></h6>

字体大小变化单独成行

align 文本水平方向对齐的方式 left左侧 center 居中 right右侧

(2)段落 <p></p>

单独成行,上下方向有垂直间距

(3)水平分割线<hr>

在网页水平方向显示一条线

水平方向位置 width="" 宽度 size="" 厚度 color 颜色

(4)特殊字符

  空格

< 小于号

> 大于号

®注册商标

¥ 人民币

(5)预格式化标签 <pre></pre>

把空格和回车保存网页中显示

(6)文本样式标签

<b></b> <strong></strong> 文本加粗

<i></i> <em></em> 斜体

<s></s> <del></del> 删除线

<u></u> 下线

标签类型

块级标签 <div><h1>..<h6><p>

单独成行,排列从上向下

行内标签 <span><i><b><s>

与其它的行内标签，共用一行，一行放不下换行，宽度高度指定无效

行内块标签 <input>

与其它的行内标签共用一行，一行放不下换行，可以指定宽度高度

图像标签

在网页中<img>标签来定义网页中图像

单词:image 缩写原意图像

src 必须添加属性,用于指定图像文件的路径和文件名

width 图像宽度

height 图像高度

title 提示文本,当鼠标移动到图像上显示文本内容

alt 替换文本,当图像不能正确显示时出现文本

新手小白上路，不喜勿喷，每天更新

想变强的小白

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
h5学习（一）

HTML(超文本标记语言)作用：创建网页并添加网页内容相比以前版本的区别：更加严格如何书写HTML5.0标准网页1.创建文件，后缀一定是.html(旧版本网页 .htm)2.文件第一行加一句声明 <!DOCTYPE html> 3.中间基本结构体<html>  <head>&l...
复制链接

扫一扫