《HTML5+CSS3》Web前端开发课堂小结

最新推荐文章于 2023-04-25 00:07:24 发布

1条咸鱼

最新推荐文章于 2023-04-25 00:07:24 发布

阅读量428

点赞数

分类专栏： HTML 文章标签： HTML 小白

本文链接：https://blog.csdn.net/qq_44105350/article/details/101390012

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

《HTML5+CSS3》Web前端开发

PS：第一天开始学习HTML，这里做为课程学习及当时遇到的问题小总结

一 URL

在这里插入图片描述

1.在URL中，常见的三种协议名：

http:超文本传输协议，用于传送网页
ftp：文件传输协议，用于传送文件
file:访问某台主机上共享文件的协议。如果访问的是本机，则主机头（https://baike.baidu.com/item/主机头/4185043）可以省略，但斜杠不能省略。

2.域名的作用：

将域名发送给DNS服务器解析得到域名对应的IP地址以便与该IP地址对应的服务器进行通信
将域名信息发送给Web服务器，通过域名与web服务器上设置的“主机头”进行匹配，确认客户端请求的是哪个网站。若客户端没有发送域名信息给Web服务器，例如直接输入IP，则Web服务器将打开服务器上的默认网站。

3.注意

网页本质是纯文本文件
对于采用虚拟主机方式的多个网站，域名和IP地址是多对一的关系
常见的浏览器内核有Webkit，Gecko，Trident，Presto

二 HTML基本结构

<html>
   <head>
      <title> 标题</title>
   </head>
   <body>
  第一次发文，紧张Σ(っ °Д °;)っ
   </body>
 </html>

三 HTML标记

在这里插入图片描述

段落标记< p>
标题标记< hn >
n的值越大，字越小
文本换行标记< br>和< wbr>
< br>为强制换行标记，换行不会产生一行空隙（DW快捷键 Shift+Enter）
< wbr>为软换行标记，当浏览器窗口或父级元素足够宽时不换行，反之自动换行。
列表标记

无序列表< ul>
有序列表< ol>
定义列表< dl>
注意：
< ul>和< ol>表示列表项都为< li>
< dl>表示为< dd>

插入图像文件< img>

属性	含义
src	图片文件的URL地址
alt	当图片无法显示时显示的代替文字
title	鼠标停留在图片上时显示的说明文字
align	图片的对齐方式，共有9种取值
width,height	图片在网页中的宽和高，单位为像素或百分比

超链接标记< a>

属性名	说明	属性值
href	超链接的URL路径	相对路径或绝对路径、E-mail、#锚点名
target	超链接打开方式	_bank:在新窗口打开 _self:在当前窗口打开 _parent:在当前窗口的父级窗口打开 _top:在整个浏览器窗口打开链接窗口或框架名：在指定名称的窗口或框架中打开
title	超链接上的提示文字	任何字符串
id、name	锚点的id或名称	自定义名称

热区链接

<img src="images/ss.jpg" alt="文字" border="0" usemap="#map"/>
<map name="Map" id="Map">
	<area shape="rect" 
	coords="21.124.188.138" href="asd.htm"/>
	</map>

< img>标记会增加usemap属性与它上面定义的地图（热区）建立关联
< area>标记的shape属性定义了热区的形状，coords属性定义了热区的坐标点，href属性定义了热区链接的文件，alt属性设置鼠标移动到热区上时显示提示文字
7. 嵌入式框架标记< iframe>

<iframe src="url" width="x" height="x" scrolling="[option]"
frameborder="x" name="main"></iframe>

scrolling——当src指定的网页在区域中显示不完时，是否出现滚动条选项，如果设置为no，则不出现;为auto，则自动出现；yes，则显示。

头部标记

标记	说明
< meta>	name属性作用提供页面描述信息. http-equiv作用是回应给浏览器一些有用的信息,以帮助正确和精确地显示网页信息
< link>	链接外部CSS文件
< style>	在网页头部嵌入CSS代码
< script>	链接或嵌入JavaScript代码

< meta>

 (1)防止乱码

<meta charset="gb2312">        
 //gb2312表示中文简体，utf8表示国际通用码

（2）描述内容

<meta name="adsda" content="内容"/>

（3）设置文档刷新

<meta http-equiv="refresh" content="30">   //设置30s后自动刷新
<meta http-equiv="refresh" content="30" ；Url="adsa.htm">
 //设置30s后自动转到 adsa.htm

< link>

<link href="sdas.css" rel="stylesheet"/> 	//链接一个css文件

< style>

<style>h1{font-size:12px;}</style>	//嵌入css代码

< script>

<script src="sda.js"></script>	              //链接一个外部js文件
<script> function msg(){alert("Hello")}</script>    //嵌入JavaScript代码

在这里插入图片描述

1条咸鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录