学习Java的43天，今天开始接触 网页编程及设计的部分，先学习的时HTML5的相关知识。对应使用到的编写软件是HBuilder。
具体主要学习了HTML的基本标签；超链接标签；图片标签；表格标签；表单标签；还通过层div标签涉及到了css的一些知识。
互联网中的三大基石：
HTML：超文本标记语言；
HTTP：超文本传输语言
URL：统一资源定位符
HTML、CSS、JS之间的关系：
HTML 是用来描述网页，CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。举个例子：HTML就像人体骨骼，ccs赋予了肉身，有了模样，js优化了外貌，使得可以动起来，可以做出反应等。
HTML
HTML是一种专门对网页信息进行规范化展示的语言。 把网页的信息格式化展现的语言 。
HTML(Hyper Text Markup Language)：超文本标记语言
超文本：文本信息 、图片、声音、视频、超链接等
标记：标签的体现
相关的学习网站：
w3cschool在线教程(网址：http://www.w3school.com.cn/)
基本结构：
Head 标签的子标签
常用标签 ：
<meta charset="xxx" /> 告诉浏览器按照xxx 的形式解析该网页；例如：xxx为：UTF-8
搜索引擎优化：<meta name="自定义优化的名称" cotent="搜索优化的内容（关键字词、关键句、关健名称等）"/>
http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
<meta http-equiv="refresh"content=" " /> 自动刷新网页及所要跳转的（contend）网址。
基本标签
标题标签：<h1 >标题内容< /h1>
h1-h6 对应字体逐渐变大，自动的加粗加黑 会自动的换行； align =“center/right/left”:调整标签的位置 （默认是left）
<h1 align="right">标题内容< /h1>
分割线标签 ：<hr/> 参数：width：宽度 500px:像素； color:颜色； align:位置 默认center； size:垂直方向的大小（粗细）
<hr width="500px" color="red" align="left" size="20px"/>
段落标签：<p>内容</p>
换行：<br />
快捷方式：br*40 ，按tab键即可 快速写出40个<br/>标签。
预文本标签 按照指定的格式输出 （灵活性比较的大）: <pre> </pre>
列表标签: 用于：树形菜单；导航栏的布局。
(1) 请列举常用的列表标签
有序列表；<ol type="指定的有序的符号类型">
<li>内容</li>
</ol>
无序列表；<ul type="指定的无序符号类型">
<li>内容</li>
</ul>
自定义列表；<dl>
<dt>父标签内容</dt>
<dd>子标签内容</dd>
<dd>子标签内容</dd>
</dl>
小标签作用不大，但是在写网页布局的时候经常会起到一些画龙点睛的作用。例如给文字内容添加下划线，变换字体大小，字体类型，内容上小标等。
下划线标签:<u></u>
斜体标签:<i>北京尚学堂</i>
加粗加黑标签:<b>北京尚学堂</b>
删除线标签:<del>北京尚学堂</del>
上标标签:2<sup>3</sup>
下标标签:log<sub>7</sub>
字体变小标签:<small>北京尚学堂</small>
字体放大:<big>北京尚学堂</big>
字体标签 :<font color="red" size="25px" face="宋体"></font>
跑马灯标签:<marquee direction="right" scrollamount="40px"></marquee>
<a></a>表示里面的内容部分可以被点击。显示表格轮廓：border=“1px”
超链接标签
（不会自动换行）
①：实现不同页面之间的跳转
<a href=“本地资源位置/跳转的网络资源的位置（网址）”target=“打开网页的方式”>跳转名</a>:指定跳转到目标资源的位置
②：实现锚点功能（在同一个网页中实现位置的跳转，例如典型的网页中“返回顶部”的操作）
<a href="#bottom" name="top">返回底部</a>
<a href="#top" name="bottom">返回顶部</a>
图片标签
指定图片的尺寸（宽和高）时，若是只指定了其中一项的数值，另一项数值会等比例的放大或者缩小，同时指定两者的话则以指定的数值为准。
用属性和属性的作用:
img (不会自动的换行)
src: 引入图片的位置{相对路径、绝对路径、网络路径 }
title：图片的标题
width="px" ：图片像素的宽度
height="px" ：图片像素的高度
border="px":图片的边框粗细程度
alt：图片无法正常显示的时候显示的属性
align:图片的位置
表格标签
table>tr*3>th*3 :声明3行3列的表格 ;
table表格的自适应能力(表格根据内容量不同自己调整表格大小);
table标签的常用的属性和对应的作用
Align ：放在table标签里表示表格整体的位置，放在行列（tr/td/th）标签内则代表所在行列的数据内容的位置
Width、height表示表格的的长和高（同样可以表示整体表格和其中的单个表格）
cellpadding：内容和单元格的距离
cellspacing：单元格和单元格之间的距离
tr：行
td:普通的列
th:标题列:自动的居中、加黑效果
colspan: 列单元格合并
rowspan：行单元格合并
bgcolor：选择相应的背景颜色
表单标签
form表单中action属性的作用、method的作用：
Action：表单被提交的位置；
Method：表单被提交的方式（get/post）；
提交方式GET 和POST 的区别：
GET:
(1)参数会依附于url地址之后
(2)利用get方式提交数据，数据的长度有限制
(3)利用get方式提交数据，是不安全的
Post ：
(1)请求不会依附于地址，
(2)利用post处理参数不受限制
(3)post提交数据比较安全
常用的表单项的属性及意义：
Input标签下的Type：
普通文本框："text"
type="radio" 单选框 实现单选的效果必须指定同一个name属性 （要想达到单选框单选的目的，除了“radio”之外，后面要写上相同的name值。），checked：默认的选择
type="checkbox"：多选框，checked：默认的选择
type="file"：文件选择框
type="hidden"：隐藏文本框，客户不可见。通过value维护。
type="submit"：提交按钮
type="reset"：清除按钮,清空写好的内容
type="button"：普通的按钮 没有提交数据的功能
多行文本框：<textarea >要写的内容</textarea>：多行文本框，rows决定文本框行数（数值越大，可写的行数越多），cols决定文本框的列数；
下拉框 ：<select >
<option value="2" selected="selected">下拉选择的内容</option>
</select>（selected="selected"）此项表示此内容为下拉选择框的默认项。
ifram
HTML中的框架标签，使用ifram标签可以对网页进行自定义的布局，在网页中可以嵌套另一个网页。
frameset
对网页进行布局，自定义（rows）横向 和 纵向（cols）的划分，划分的每一个部分都可以嵌套引入网页。framset相当于将网页引入进来，网页中包含body标签，所以用到framse标签时不再需要body标签了。
网页大小不可改变：属性：noresize=”noresize”
div标签
将网页进行模块化的划分，div本身没有任何的意义。配合css使用。
扫一扫
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
