web开发----HTML入门与实战

web标准

结构标准(structure):结构用于对网页元素进行整理和分类,主要包括XML和XHTML两个部分。
样式标准(presentation):表现用于设置网页元素的版式,颜色,大小等外观样式,主要指的是CSS。
行为标准(behavior):行为是指网页模型的定义及交互的编写,主要包括DOM和ECMAScript。

HTML入门

HTML(英文Hyper Text Markup Language的缩写),中文翻译为“超文本标签语言”
注意体会“标签,文本”几个词。

HTML骨架

<html>
	<head>
  		<title></title>
 	</head>
 	<body>
 	</body>
</html>

标签分类
有单标签(非常少)和双标签,双标签占绝大多数。
“ / ” 称为关闭符号。

标签关系
嵌套关系和并列关系。
建议:如果两元素是嵌套关系,子元素最好缩进一个tab。如果是并列关系,就上下对齐。

HTML标签

标题标签

<h1><h2><h3><h4><h5><h6>

作为标题使用,且重要性依次递减。
基本格式:

<hn> 标题文本 <hn/>

注意:尽量少用h1, 一般h1都是给logo使用。

段落标签

<p>   </p>

水平线标签

<hr />

这是个单标签

换行标签

<br />

break的缩写,像word里直接敲回车是没用的。

div和span标签

<div></div>
<span></span>

用来分区

文本格式化标签
在这里插入图片描述
标签属性

<标签名 属性1=“属性1值” 属性2=“属性2值” ···></标签名>
e.g.
width表示长度,color表示颜色

图像标签
单标签

<img src="图片URL" />
src是一个属性,表示路径。

链接标签
anchor的缩写,锚

<a href="https://www.baidu.com/" target="_blank">百度(链接名称)</a>

href用于指定连接目标的URL地址,具有超链接功能。
target:指定目标窗口打开方式,常见取值有两种,self和blank,self是默认,blank是打开新窗口。
外部链接需要添加 https://
当没有确定链接时,可用“#”定义href属性(href="#"),表示空链接。
注意:不仅可以创建文本超链接,图片,音频,页面内目录跳转等等都可以创建超链接。
锚点定位

<a href="# + id名">链接文本</a>
跳转到
<hn id="id名"></hn>

base标签
全局设置链接打开方式为新页面

<head>
	<base target="_blank"/>
</head>

特殊字符标签
在这里插入图片描述
注释标签

<!-- 注释内容 -->

相对路径
如果图片和HTML文件位于同一文件夹,只需输入图像名称即可,如
如果图片位于HTML的下一级文件夹,要输入文件夹名和文件名,之间用“ / ”隔开,如
如果图片位于HTML的上一文件夹,在文件名前加入"…/",如果是上两级,则需要使用"…/…/",以此类推,如

绝对路径
C:\Users\94479\Desktop\logo.jpg(很少使用)或完整网络地址

无序列表ul

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	<li>
		<h4></h4>
		<p></p>
	</li>
</ul>

注意:

    标签中只能放
    • ,但是
    • 标签中可以随便放。

      有序列表

      <ol>
      	<li>列表项1</li>
       	<li>列表项2</li>
       	<li>列表项3</li>
       	<li>
        		 <h4></h4>
       		 <p></p>
       	</li>
      </ol>

      注意:

        标签中只能放
      1. ,但是
      2. 标签中可以随便放。

        自定义列表

        <dl>
        	<dt>名词<dt>
        	<dd>名词解释<dd>
        	<dd>名词解释<dd>
        	<dd>名词解释<dd>
        	...
        </dl>
      • 0
        点赞
      • 0
        收藏
        觉得还不错? 一键收藏
      • 0
        评论

      “相关推荐”对你有帮助么?

      • 非常没帮助
      • 没帮助
      • 一般
      • 有帮助
      • 非常有帮助
      提交
      评论
      添加红包

      请填写红包祝福语或标题

      红包个数最小为10个

      红包金额最低5元

      当前余额3.43前往充值 >
      需支付:10.00
      成就一亿技术人!
      领取后你会自动成为博主和红包主的粉丝 规则
      hope_wisdom
      发出的红包
      实付
      使用余额支付
      点击重新获取
      扫码支付
      钱包余额 0

      抵扣说明:

      1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
      2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

      余额充值