HTML学习

可可爱爱没有脑袋huhuhu

于 2021-07-20 20:44:48 发布

阅读量157

点赞数

文章标签： html

本文链接：https://blog.csdn.net/zdw2388317527/article/details/118937280

版权

一丶HTML

1.概念

HTML是最基础的⽹⻚开发语⾔，Hyper Text Markup Language 超⽂本标记语⾔

超⽂本：超⽂本是⽤超链接的⽅法，将各种不同空间的⽂字信息组织在⼀起的⽹状⽂本
标记语⾔：由标签构成的语⾔，使⽤标签的⽅法将需要的内容包括起来。<标签名称> 如 html，xml

2.HTML（作用：用于编写网页）

（1）⽹⻚内容包含： HTML 代码、 CSS 代码、 JavaScript 代码等内容。

HTML代码：⽤于搭建基础⽹⻚，展示⻚⾯的内容、需要显示的数据。
CSS代码：⽤于美化⻚⾯，布局⻚⾯，使显示的数据更加好看。
JavaScript代码：控制⻚⾯的元素，让⻚⾯有⼀些动态的效果。

（2）⽹⻚根据内容是否可以改变分为：静态⻚⾯、动态⻚⾯。

静态⻚⾯：使⽤静态⽹⻚开发技术发布的资源

特点：

编写之后在浏览器不再改变的⽹⻚。HTML就是⽤于编写静态⽹⻚的。
所有⽤户访问，得到的结果是⼀样的。
如果⽤户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。

动态页面：使⽤动态⽹⻚及时发布的资源

特点：

会根据不同的情况展示不同的内容。

所有⽤户访问，得到的结果可能不⼀样。
如果⽤户请求的是动态资源，那么服务器会执⾏动态资源，转换为静态资源，再发送给浏览器。

3.WEB三要素

浏览器：向服务器发起请求，下载服务器中的⽹⻚（HTML），然后执⾏HTML显示出内容。
服务器：接收浏览器的请求，发送相应的⻚⾯到浏览器。
HTTP协议：浏览器与服务器的通讯协议。

二丶⽹站信息⻚⾯显示

1.html语言特点

HTML⽂件不需要编译，直接使⽤浏览器阅读即可
HTML⽂件的扩展名是： *.html 或 *.htm
HTML结构都是由标签组成（标签名不区分大小写）
HTML结构包括两部分：头head和体body

2.HTML模板

<!-- !DOCTYPE 就是html文档规范, html5规范 -->
<!DOCTYPE html>
<!-- html/htm文件根标签 - html
     子标签: head, body
     head: 文件头, 都不会显示在页面中
           css代码, js代码
     body: 文件内容
 -->
<!--定义页面语言为英语-->
<Html lang="en">
<head>
    <!-- 元信息, 设置页面基本信息, 例如字符集, 缩放比例, 分辨率, 描述... -->
    <meta charset="UTF-8">
    <!-- 标题: 显示再标签卡中的 -->
    <title>html模板</title>
</head>
<body>
    <!-- 没有格式, 所有文本以外的内容, 都需要标签来完成 -->
    hello html!
</body>
</Html>

3.标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<!-- 标题标签hn特点:
		     随着hn中 n的数值变大, 标题大小会变小
			 标题是独立占一行
			 n: 1 ~ 6
		-->
		<h1>1级标题</h1>
		文章正文
		<h2>2级标题</h2>
		<h3>3级标题</h3>
		<h4>4级标题</h4>
		<h5>5级标题</h5>
		<h6>6级标题</h6>
		<!-- 标题标签是没有h7 -->
		<h7>7级标题</h7>
	</body>
</html>

4.标签特点(段落字体标签特殊字体标签分割线换行)

<!-- 1. 段落 特点: 自动换行, p与p之间会有留白 -->
<p>Lorem ipsum dolor sit amet  <p/>

 <!-- 2.字体标签, 需要通过属性来控制效果
属性: color: 颜色 rgb(255,0,0)  #ff0000(#f00)  red
size: 大小  1~7 数值越大, 字体越大
face: 字体名-->
<font color="#3286BB" size="5">Lorem ipsum dolor sit amet.</font>

<!-- 3.特殊字体标签 -->
<!-- 加粗b, 变斜i, 下划线u 加粗strong 强调em 预设标签pre（输出内容与标签内相同）-->
<b><i>Lorem ipsum dolor.</i></b>
<i>Lorem ipsum dolor.</i>
<u>Lorem ipsum dolor.</u> 
<strong>Lorem ipsum dolor.</strong>
<em>Lorem ipsum dolor.</em>
<pre>
离离原上草
   一岁一枯荣
 </pre>

<!-- 4.分割线 属性: size noshade
noshade="noshade": 属性名和属性值一样的, 可以省略=后面部分
width: 宽度, [像素, 百分比]
align: 对齐方式, left, center, right-->
<hr size=7 noshade width="50%" align="left" />

<!-- 5.换行-->
</br>

5.列表 ol ul

<!-- 1.有序列表（带序号）自动换行 
start 起始序号 type 序号类型 1 a A i I-->
<ol start="2" type="I" >
<li>牙</li>
<li>签</li>
<li>伞</li>
<li>兵</li>
/ol>
		
<!-- 2.无序列表 属性：type circle disc(默认) square -->
<ul type="circle">
<li>牙</li>
<li>签</li>
<li>伞</li>
<li>兵</li>
<ul>

6.超链接 a

<!-- 超链接 -->
<!-- 
href：⽤于确定需要显示⻚⾯的路径（URL）
target：确定以何种⽅式打开href所设置的⻚⾯。常⽤取值：_blank、_self等 
_blank 在新窗⼝中打开href确定的⻚⾯
_self 默认。使⽤href确定的⻚⾯替换当前⻚⾯ -->
<a href="http://www.baidu.com" target="_self">
 访问“百度”官⽹，以默认⽅式打开
</a><br />
<a href="http://www.qq.com" target="_blank">
 访问“腾讯”官⽹，以新窗⼝⽅式打开
</a><br />

7.图片

<!--src属性：指定需要显示图⽚的URL（路径）
width属性：设置图像的宽度
height属性：设置图像的⾼度
alt属性：图⽚⽆法显示时的替代⽂本
title属性：⿏标移上图⽚时显示的标题-->
<img src="image/registImg2.jpg" alt="这是⼀张不显示的图⽚"
 width="200px" height="200px" title="⿏标移上显示" />

注：路径问题:
1.绝对路径: 盘符开始
   URI: 统一资源路径
     /Users/bonnie/Java2106/WEB/day01/img/logo2.png
   URL: 统一资源路径
    http://             127.0.0.1:8848/WEB/day01/04_多媒体标签.html
   协议 ip:port / URI
   file:///Users/bonnie/Java2106/WEB/day01/04_多媒体标签.html
2.相对路径
   相对目录
       . : 当前目录
       ..: 上一级目录

8.表格标签

<!-- 1.表格标签, 有行和列(单元格)
属性:border: 边框 - 像素
cellspacing: 单元格之间的间隙
cellpadding: 单元格内容和边框之间的距离
align: center 表格居中
width: 表格的宽度
height: 表格的高度
子标签: thead?  tbody*  tfoot? 只是为了标记
tr: 行
td: 单元格
th: 表头的单元格-->
<table border="1" cellspacing=0 cellpadding=10 
align="center" width="400" height="300">
<!-- 表的标题 -->
<caption>学员信息</caption>
<!-- 第一行: tr 表头
属性: align: center 内容居中
bgcolor: 背景颜色
th: 自带加粗和居中特点
td: 属性 colspan(合并列)
rowspan(合并行)->
<thead>
  <tr bgcolor="gray">
    <th>序号</th>
    <th colspan="2">姓名</th>
  </tr>
</thead>
<!-- 第二行 -->
<tbody>
   <tr>
      <td>1</td>
      <td>易烊千玺</td>
      <td>18</td>
   </tr>
   <tr>
       <td>1</td>
       <td rowspan="2">易烊千玺</td>
       <td>18</td>
   </tr>
</tbody>
</table>

9.分组模块

<!-- 组合-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分模块</title>
	</head>
<frameset rows="20%,*">
	<frame src="分模块_head.html" />
	<frameset cols="30%,*">
		<frame src="分模块_left部分.html" />
		<frame src="分模块_主体部分.html" name="body"/>
	</frameset>
</frameset>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
                <!--主体部分 -->
                <font size="5" color="black">head</font>
                <!--left部分 -->
		<a href="http://www.baidu.com" target="body">百度</a>
		<a href="图片.html" target="body">图片</a>
                <!--head部分-->
	</body>
</html>

可可爱爱没有脑袋huhuhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习

一丶HTML1.概念HTML是最基础的⽹⻚开发语⾔，Hyper Text Markup Language 超⽂本标记语⾔超⽂本：超⽂本是⽤超链接的⽅法，将各种不同空间的⽂字信息组织在⼀起的⽹状⽂本标记语⾔：由标签构成的语⾔，使⽤标签的⽅法将需要的内容包括起来。<标签名称> 如 html，xml2.HTML作用（用于编写网页）3.HTML⽹⻚内容包含：HTML代码、CSS代码、JavaScript代码等内容。HTML代码：⽤于搭建基础⽹⻚，展示⻚⾯的内容、需要显示
复制链接

扫一扫