HTML基础知识

最新推荐文章于 2021-05-16 00:17:24 发布

yangwensheng1122

最新推荐文章于 2021-05-16 00:17:24 发布

阅读量422

点赞数

本文链接：https://blog.csdn.net/yangwensheng1122/article/details/74838087

版权

《HTML基础》学习笔记

杨文生
2017.07.06

HTML上课笔记
1.1 HTML基础知识
什么是计算机语言
人与人之间是通过语言交流，那么人和计算机之间如何交流呢？计算机只知道“0”和“1”，所以我们通过“0”和“1”这种语言来和计算机交流，这就是计算机语言。
计算机语言对于人来讲太难理解，编制程序太困难，为了解决这个问题，我们将一串特定的“01”进行符号化，这就是汇编语言。
机器语言和汇编语言都是属于低级语言，即体现了机器的特性，而对于大多数不是计算机工程师的人来讲，还是太困难了。
高级语言：用类似英语加数学的符号来描述，最大程度屏蔽了机器的特性，使得程序对的阅读和编制越来越容易。
常见的高级语言有C、C++、C#、PHP、JAVA。

1.2什么是标记语言
什么事文本文件：只有文本内容没有任何格式，举例：
在笔记本中输入“带你出师，闯荡江湖！”，并设置相应的格式，但是在其他的电脑上打开并没有显示同样的格式说明其不包含任何格式信息。查看文件大小显示20字节

在word中输入同样的内容，同时设置格式，在另一个电脑上打开显示有同样的格式。同事查看文件的大小

说明word文档中除了存储了内容，还有存了格式等信息（document.xml）ml就是标记语言的（Markup Language）缩写
我们要学的HTML（HyperText Marked Language）也是一种标记语言。
超文本：不仅仅能表示文本信息，还能表示音视频、格式等等信息。
浏览网页实际上就是将存在服务器上的HTML文件下载到本地，然后通过浏览器进行解析并呈现出来。
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>我的网页</title>
</head>

<body>
<h2>带你出师，闯荡江湖</h2>
</body>
</html>
<html>：是整个文档的根节点，它包含两个子节点：
<head>：主要描述文档的设置信息，比如字符集、标题等
<body>：是文档的主体部分，需要呈现的内容都安排在其中。

注释：
添加HTML注释的快捷键：ctrl+shift+/
形式：
作用：对代码进行说明，方便程序员阅读和理解，注释对于计算机的执行结果没有任何影响。
注释非常重要，代码正确是前提，但清晰也是一个非常重要的原则，程序员要养成注释的习惯。

基本标签
<标签名> </标签名>
2.1 标题标签

标题标签用于显示页面的标题信息，既包含了格式信息，同时提供了语义信息。
<h1>--<h6>

2.2段落标签

段落<paragraph></ paragraph >标签标示页面的一个段落自动换行。
<h3>登鹳雀楼</h3>
<p>白日依山尽</p>
<p>黄河入海流</p>
<p>鱼群千里目</p>
<p>更上一层楼</p>

2.3连接标签
连接标签<a>的作用是跳转，包括页面见跳转和页内跳转
href：
target：
self：这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

blank：浏览器总在一个新打开、未命名的窗口中载入目标文档。

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

top：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
<a href="http://www.runoob.com"target="_blank" title="真的很菜"/> 菜鸟网</a>

href属性指定链接的目标URL地址
target属性指定打开目标页面的方式，其取值包括
_self:在当前页面中打开，默认；
_blank:在新的页面中打开；
_parent: 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top: 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
title属性指定提示信息

（2）页内的跳转
在目标标签处指定id="……"，在链接处指定href="#……"
id属性是页面元素的唯一标识
“锚点”：anchor
2.4图片标签<img>
在网页中嵌入图片
Src：source，图片的源URL地址，可以使本地的，也可以是远程的
<img src="江南.jpg" >

<img src="江南.jpg" alt="图片资源不存在">
Alt属性：（可替代的），即当资源不存在时，替代显示的文字内容
路径：
绝对路径：概念：是从盘符开始的路径，形如C:\windows\system32\cmd.exe（Windows 系统），linux系统中绝对路径以“/”为起始例：/home/user1/abc1.txt
在网络中，以http开头的链接都是绝对路径，绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，绝对路径一般在CGI程序的路径配置中经常用到，而在制作网页中实际很少用到。
相对路径：概念：指相对于该文件本身的其他文件的位置
以下为建立路径所使用的几个特殊符号，及其所代表的意义。（qq文件的位置：E:/wamp/www/xm/home1/qq.php）
"./"：代表目前所在的目录。例：./user/abc.xml 也可简写成：user/abc.xml
"../"：代表上一层目录。例：../home2/user2/abc2.php
以"/"开头：代表根目录。例：/xm/home2/user2/abc2.php

“..”表示上一级目录
“.”表示当前目录
在同一级目录
<img src="海南风景.jpg">
在上一级的目录
<img src="../海南风景.jpg">
在下一级目录
<img src="./pic/海南风景.jpg">
2.5 杂项
<span>将部分文本独立出来
<br>强制换行
<hr>绘制一条横线
<base>设置页面的基准位置，从而简化了地址的书写。
<base href="http://www.runoob.com/images/">

标签为页面上的所有链接规定默认地址或默认目标。
学习方法
为什么
是什么
怎么用
3列表标签

Word之中的列表

序列列表
有序列表
3.1 无序列表
<ul>:unordered list 定义一个无序列表
<li>:list item 定义一个列表项
Ctrl+d：复制当前行（duplicate）
Li*3+tab 产生三个li
Tybe属性用来指定无序列表的符号，取值有：
Disc：实心的圆点，默认值
Circle：空心的圆圈
Square：实心的正方形
<ul type="disc">
<li>浙江</li>
<li>江苏</li>
<li>江西</li>
<li>河南</li>
</ul>
3.2有序列表
<ol>ordered list ,有序列表，即序列项带有序号
Tybe属性是用来指定序号的类型，其取值：
1：序号为1.2.3.4 …. 默认值
A：序号为 A.B.C.D….
a：序号为 a.b.c.d….
I：序号为 I.II.III.IV….
i：序号为 i.ii.iii.iiii….
start属性定义从几个开始，当取值为0或负数时从取值数值顺序开始
3.3 列表的镶嵌
自学

3.4自定义列表
<dl> defined list 定义一个列表
<dt> defined title 列表项的标题
<dd>defined description 列表项的描述
<dl>
    <h3></h3>
    <dt>河南</dt>
    <dd>河南是中华民族与华夏文明的发源地。中国四大发明中的指南针、造纸、火药三大技术均发明于河南。</dd>
    <dt>江苏</dt>
    <dd></dd>
    <dt>浙江</dt>
    <dd></dd>
    <dt>江西</dt>
    <dd></dd>
</dl>

4.表单
4.1表单
什么事表单？手机用户填写的信息并将其提交到后台服务器。
<Form>
Action 属性：指定提交的地址
Method属性：指定提交的方式。Get   post
Get和post的方式的区别
1. 长度的限制。Get方法限制在2k 以内
2. 安全性，get方式提交的数据会直接呈现在地址栏
4.2文本框
<input id="userid" type="text" maxlength="10" size="19" value="abc">

Maxlength 属性指定文本框能接受的最大字符个数
Size属性指定文本框的大小
Vlue 属性指定默认初始值
4.3密码框
<input type="password" maxlength="6">

密码框和文本框是一样的，文本框的属性也适用于密码框，唯一不同的是密码框是以掩码的形式显示内容，保证安全性。
4.4lable
<lable>的作用
（1）可单独对其应用相应的样式
（2） For属性可以使之和某个<input>关联，即当单机文本会激活对应的<input>。
<lable for="userid">账号：</lable>
<input id="userid" type="text" maxlength="10" size="19" value="abc"><br/>

4.5单选按钮
<input type="radio" name="role"/>学生
<input type="radio" name="role" checked/>教师
<input type="radio" name="role"/>管理员

如果需要将若干个单选按钮变为一组（一组最多只有一个被选中）需要设置相同的name属性
如果需要默认选中某个选项，需加上checked属性
标签属性的表现形式
（1）键值对：属性名=属性值
type=“text” maxlength=“6”
（2）一些取值为布尔类型的属性直接使用属性名
Checked readonly
4.6多选按钮
<input type="checkbox" name="hobby" value="1">运动
<input type="checkbox" name="hobby" value="2">音乐
<input type="checkbox" name="hobby" value="3">打游戏
<input type="checkbox" name="hobby" value="4">看电影
<input type="checkbox" name="hobby" value="5">玩桌游
<input type="checkbox" name="hobby" value="6">吃美食

4.7提交按钮
<input type="submit" value="登陆"/>

点击按钮之后跳转到form表单指定的 action
value属性 value上的值对应的就是显示按钮上面的文字
点击按钮将form表单中的input中name属性值（键）和用户输入的值组成键值对（或input标签value属性对应烦的值）。并拼接到form表单action属性值的后面。

4.8重置按钮
<input type="reset" />
（1）点击按钮，重置表单内部的输入框（单选按钮）
（2） value属性：value对应的键就是按键上显示的文字
4.9普通按钮
<input type=”button”value=”校验”>
（1）点击按钮，没有任何的反应。
（2）需要设置src属性的值，如果src对应的路径没有找到图片，并且有设置alt属性，按钮显示默认值“提交”，若果设置了alt属性则显示alt的值。（类似img标签）

4.10图片按钮

<input type="image"src="华点.png" alt="登陆"/>
（1）作用和submit按钮是一样的
（2）需要设置src属性的值，如果src对应的路径没有知道图片，并且没有设置alt属性，按钮显示默认值“提交”，如果设置了alt属性则显示alt的值。（类似img标签）
4.11<button>标签
（1）内容可以是任意资源（图片，段落，音频）
（2）当button标签放置在form内部，作用和submit一样。

yangwensheng1122

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识

《HTML基础》学习笔记杨文生2017.07.06HTML上课笔记1.1 HTML基础知识什么是计算机语言人与人之间是通过语言交流，那么人和计算机之间如何交流呢？计算机只知道“0”和“1”，所以我们通过“0”和“1”这种语言来和计算机交流，这就是计算机语言。计算机语言对于人来讲太难理解，编制程序太困难，为了解决这个问题，我们将一串特定的“01”进行符号化，这就是汇编语言
复制链接

扫一扫