前端学习秘籍——HTML

一. WEB标准

1.认识网页

网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

2.浏览器(显示代码)

浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。

3.浏览器的内核

浏览器内核
IETrident (读try dent)
firefox(没落了)Gecko(读get ko)
Safariwebkit
chromeChromium/Blink
OperaBlink

移动端的浏览器内核主要说的是系统内置浏览器的内核。

Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。

iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的。

4.WEB标准

Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。

W3C 万维网联盟是国际最著名的标准化组织。

WEB标准的好处
遵循web标准可以让不同我们写的页面更标准更统一外,还有许多优点

1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度

WEB标准构成
主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

结构:用于对网页元素进行整理和分类,咱们主要学的是HTML。
表现:用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
行为:是指网页模型的定义及交互的编写,咱们主要学的是 Javascript。

二. HTMl

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

html的作用:网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了。

所谓超文本,有2层含义:

  1. 因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制 )
  2. 不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。

1.HTML骨架格式:

<!DOCTYPE html> <!--就是告诉浏览器按照HTML5 规范解析页面. -->
<html lang="en"> <!-- 指定该html标签 内容 所用的语言为英文  zh-CN为中文 -->
<head>
    <meta charset="UTF-8">  <!-- 让 html 文件是以 UTF-8 编码保存的, 浏览器根据编码去解码对应的html内容 -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.HTML常用标签

h:标题标签 h1-h6

 <h1>标题标签</h1>

p:段落标签

<p>段落标签</p>

hr:水平线标签

**<hr /> 是单标签**

br:换行标签

**<br /> 单标签**

div span:没有语义的标签(重点

  • div标签 用来布局的,但是现在一行只能放一个div
  • span标签 用来布局的,一行上可以放好多个span
<div> 这是头部 </div>    <span>今日价格</span>

strong em del ins :文本格式化标签(熟记)
在这里插入图片描述
img:图像标签(重点

<img src="图像的地址" /> 
<img src="" alt="图像不见显示我" title=" 鼠标经过我就出现" width="图片的宽" height="图片的高">

在这里插入图片描述
引用路径的问题:
同一级路径:src=“baidu.jpg”
下一级路径:src=“images/baidu.jpg”
上一级路径:src=…/baidu.jpg

a:链接标签(重点

<a href="跳转目标" target="目标窗口的弹出方式 _blank表示打开新窗口">文本或图像</a>

注意:

  1. 外部链接 需要添加 http:// www.baidu.com
  2. 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
  3. 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
  4. 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

base :设置整体链接的打开状态

<base target="_blank" /><!-- 写在head里面 -->

特殊字符的代码
在这里插入图片描述

3.表格table的使用

表格的基本语法:

 <table>
        <tr>  <!--行-->
            <td>单元格内的文字</td>  <!--单元格-->
        </tr>
    </table>

案例:
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <caption>表格标题</caption>
   <th>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </th>
   <tr>  <td>刘德华</td> <td></td> <td>55</td>  </tr>
</table>

cellspacing 设置单元格与单元格之间的距离h
cellpadding 设置单元格内容与单元格边距的距离
caption:表格的标题,写在table里,文字会在表格的上方加粗和居中
th 为表头单元格标签,会加粗文本并居中

单元格合并的问题解决:

  1. 先确定是跨行(rowspan)还是跨列(colspan)合并
  2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 :
  3. 删除多余的单元格 单元格

表格划分结构(了解)
在这里插入图片描述

4.列表的使用

无序列表ul:
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</ul>

有序列表ol:
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

自定义列表dl:
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

5.表单的使用

在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息表单域3个部分构成。

表单控件 input:(重点)
语法如下:

<input type="属性值" value="你好">

<input />标签为单标签
常用的属性:
在这里插入图片描述
label标签----提供用户体验
当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面
语法如下:

<label for="sex"></label>
<input type="radio" name="sex"  id="sex">

文本域标签textarea

<textarea> </textarea>

select 下拉列表

<select>
  <option selected="selected">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

form 表单域

<form action="服务器程序的url地址" method="提交方式get/post" name="表单名称">
  各种表单控件
</form>

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值