web前端技术——一、HTML语言基础

最新推荐文章于 2024-04-05 12:46:18 发布

ice三分颜色

最新推荐文章于 2024-04-05 12:46:18 发布

阅读量530

点赞数 2

分类专栏： web前端技术文章标签： html 前端

本文链接：https://blog.csdn.net/qq_46007633/article/details/123572103

版权

web前端技术专栏收录该内容

11 篇文章 4 订阅

订阅专栏

一、HTML语言基础

1.1.Internet起源：

1989年，开发出简易的超文本浏览/编译器

1993年，第一个图形界面浏览器NCSA Mosaic开发成功

1995年，网景公司的Metscape Navigator,推出了IE浏览器

HTML:超文本标记语言

1.2.HTML结构：<标签>内容<标签>

<!DOCTYPE…>

<html>

<head>

<meta charset="UTF-8">

<title>页面名称</title>

</head>

</html>

1.3.注意事项：

Html不区分大小写

Html的属性和属性值？

无论中间加多少空格，都显示出一个

注释：<!—标题-->

标签可以嵌套使用

2.1<head>元素

包含很多标签，用于向浏览器提供整个页面的基本信息

子元素：<title>,<meta>,<base>,<link>,<script>,<stype>等

<title>页面标题</title>

<meta charset="UTF-8">

<meta name="keywords" content="demo">
<meta http-equiv="content-type" content="text/html">

<meta http-equiv="refresh" content="5;url=http://www.baidu.com"><!—五秒自动跳转到百度-->

3.文本元素与文档结构

文本元素分为内容标题，文本修饰和特殊字符。

3.1内容标题：

<h1></h1>到<h6></h6>，没有<h7></7>之后的了

3.2文本修饰

   <font size="30px" color="#ff0000">中国</font>
   <b>中国</b>
    <strong>中国</strong>
    <i>中国</i>
    <s>中国</s
    <u>中国</u>
    <big>中国</big>
    <small>中国</small>
    2<sup>3</sup>
    2<sub>3</sub>
<font face="隶书" size="10" color="blue">通过font控制文本字体外观样式，设定文本的字体、大小、颜色</font>
<br/>

3.3特殊字符

" 双引号"
&号：&
空 格
小于号：⁢
大于号：>
小于等于：≤
大于等于：≥
版权号：©
商标符号：™
注册商标：®
分数：¼½
左箭头：←
上箭头：↑
右箭头：→
下箭头：↓
左右箭头：↔
左下箭头：&crarr;
左双箭头：⇐
上双箭头：&uArr;
右双箭头：⇒
下双箭头：&dArr;
交集：∩
并集：∪

3.4文档结构元素

<br/>换行标签

<hr/>水平线标签:width可以是百分比，也可以是”400px”这种数字
<p>
水平线<hr with="50%" align="center" size="10" color="red" noshade="noshade"/>

段落标签对于网页内容提供块级格式，<br/>当浏览器解析这个标签是通常在下一个段落之前插入一个新的空白行
</p>

3.5列表元素

列表元素
有序列表：树值或字母作为编号.type表示类型是1234，还是ABCD之类的，start表示从哪一个开始，start等于3表示序号从第三个序号开始，3456，cdefg<br/>
<ol type="A" start="3">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>
无序列表：使用项目符号作为编号.type可等于circle(圆),disc(点),square(方块)，none等类型<br/>
<ul type="disc">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>
定义列表：列表中每个项目与描述配对显示.一个定义中可包含1~n个子项，都有两部分标题和描述组成，成对出现<br/>
<dl>
    
    <dt>标题1</dt>
    <dd>描述1</dd>
    
    <dt>标题2</dt>
    <dd>描述2</dd>
    <dt>标题3</dt>
    <dd>描述3</dd>
</dl>

3.6.div与span标签

如果div标签不使用CSS样式，在页面中效果与<p>基本相同，且独占一行，通过div可对页面进行整体划分，并使用CSS进行修饰，以实现页面布局。

<div style="border:2px #f00 solid">块级元素div标签用于将网页中某一特定区域用边框围起来，并赋予指定样式。
    style属性用于设定div元素的行内样式，class用于引用CSS的类选择器，
    align用于设置div元素中的对齐方式，left，right，center，justify居中对齐</div>
<span style="color: yellow;font-weight: bold;font-style: italic">
    span是属于行内块，用于指定行内元素，通过span标签来选择特定文本，以便赋予特殊样式 </span>

4.1.URL

http://www .baidu.com/web/index.html

三个关键部分：协议主机地址文件路径

4.2绝对路径和相对路径

绝对路径是指一个完整的路径

“百度一下，你就知道“

d:/web/demo01.html

相对路径：

比绝对路径简洁

相对路径的访问方式有以下几种形式

同一目录

子目录

父目录

根目录

注：没有找到图像资源会显示alt属性。

<img src="strawberry.jpg" width="100px" border="ipx"alt="草莓"/><!—同一目录下的-->
<img title="welcome" src="img/yuanchu.jpg" height="100px"/><!—子目录下的-->
<img src="../images/sky.jpg" width="70%"/><!—宽度是百分比时，会随外层容器的改变而改--><!—父目录下的-->
<img src="/demo01/wu.jpg" width="100px"/>

5.1超链接标签

文本链接
    <a href="demo02.html" title="网站首页">网站首页</a>
    <a href="http://www.baidu.com" title="百度一下">百度</a>
    图片链接
    <a href="demo02.html" title="图片">
        <img src="strawberry.jpg" width="100px" border="ipx"alt="草莓"/></a>
<br/>
    锚点连接
    <a href="#myAnchor">锚点连接，链接到锚点的位置</a>
    <a id="myAnchor">创建锚点的位置，跳转之后的位置，把该锚点和链接不要放置在太靠近或者没有滚动条的页面，否则看不出跳转的效果</a>

跨页面的锚点链接
<a href="edmo03.html#myAncho">页面三</a>

<a id="myAncho">创建锚点的位置，这是跳转之后的页面要写的</a>

图片热区链接

<map name="myMap"> <area shape="circle" coords="32,35,31" href="http://baidu.com"/> <area shape="rect" coords="62,84,104,205" href="demo02.html"/> <area shape="poly" coords="114,73,133.11,107,11" href="#" > </map> <img src="strawberry.jpg" usemap="#myMap" border="1"/>

空连接
<a href="#" >空连接</a>
Email链接
href属性由mailto:+邮箱地址组成。会使用默认程序打开电子邮件，并准备发送该电子邮箱链接到的地址
JavaScript链接
实现对JavaScript脚本的调用
<a href="JavaScript:alert('你好，欢迎来到web前端设计课堂');">
javascript链接，弹出提醒信息
</a>
<a href="JavaScript:void(0);"onclick="alert('欢迎来到web前端设计课堂');">
javascript链接，弹出提醒信息
</a>

超链接的target属性

默认情况下，链接会在当前活动窗口打开目标链接文档目标文档的内容将替换当前显示的页面内容。

<a href="demo02.html" target="_blank">打开目标链接</a>

ice三分颜色

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
2
评论
web前端技术——一、HTML语言基础

一、HTML语言基础1.1.Internet起源：1989年，开发出简易的超文本浏览/编译器1993年，第一个图形界面浏览器NCSA Mosaic开发成功1995年，网景公司的Metscape Navigator,推出了IE浏览器HTML:超文本标记语言1.2.HTML结构：<标签>内容<标签><!DOCTYPE…><html><head><meta
复制链接

扫一扫