一、HTML CSS JS 的联系
一张图概括：
网页主要由三部分组成： 结构（ Structure） 、 表现（ Presentation） 和行为（ Behavior）
HTML —— 结构， 决定网页的结构和内容（ “是什么”）
CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）
使用HTML可设计静态网页，CSS用美化网页，js(javascript)
是一种简单脚本语言， 在浏览器中实现与客户的交互
（例如账号的登陆页面即交互）
二、HTML的基础语法
1.HTML由标签构成，标签分为单标签、双标签（成对出现）和有属性与无属性标签，属性级对标签元素的 控制信息。
单标签 无属性<标签名/> 有属性 <标签名 属性名=""/>
双标签 无属性<标签名></标签名> 有属性 <标签名 属性名=""></标签名>
整体结构：
< html>
< head>< /head>
< body>< /body>
< /html>
2.常用标签：
-
水平线标签< hr/>
属性： width宽度=“X%” align对齐方式=“left,right,center(默认)” size粗细=“X”
< hr width=“50%” align=“left” size=“2”/> -
标题标签
< h?>< /h> ？为1~6的数，大小依次减小 -
body标签
bgcolor 背景颜色=’‘color’’ text字体颜色=“color” -
段落标签< p>< /p> 指定对齐方式
常用属性 align 左中右 justify(两端对齐) -
换行标签< br/>
-
列表 分为有序列表和无序列表
有序：< ol type=’’‘序号类型’>
< li>内容< /li>
< li>内容< /li>
…
< /ol>无序：< ul type=’’‘序号类型’>
< li>内容< /li>
< li>内容< /li>
…
< /ul>
常用属性： type 在有序列表中，有数字1，大小写英文字母a A，大小写罗马数字i I；在无序列表中，disc 实心圆点（默认） circle 空心圆点 square 实心方框。
-
div和span
div默认无论你写多少东西，它占一整行的位置。所以div有自动换行的功能。
而span和div相反，你写多少位置它就默认占多少位置。
div与span后期与css结合会有更好的效果。 -
font字体标签
常用属性：size大小，color颜色，face字体=“楷体”。
-
一些小标签
< pre> 内容< /pre> 该标签的作用是：保留内容的格式，包括换行，空格等，总之，写啥就保留啥。
-
超链接标签
< a href=“要转向的文档或网址” target=“链接打开方式”>超链接名称内容</ a>
target属性 常用_blank,在新窗口中打开，_self,在同一窗口中打开（默认）。
href为必须属性。
-
超链接标签< a>< /a>锚点的使用
锚点，也叫做命名锚点，通过name来定位。可以实现在同一页页面中进行链接，很常用，它的英文名称是anchor，也是用a标签来链接的。它的作用是链接同一个页面的某一个章节。
~如果要直接返回页面顶端，< a href="#">锚点< /a>~ 如果要返回一个自定义的位置，在要返回位置处写< a name=“任意”>,然后在尾部写< a href="#任意">
-
图片标签< img>
常用属性 必须属性：scr=“图片来源地址”
title:当鼠标悬停在图上上显示文字
width height：宽度，高度
alt：当图片加载失败时显示的文字
align：设置图像的对齐方式
可以对图片使用超链接< a> 标签 -
表格标签 是一个组合
< table>< /table> 是外框
< tr>< /tr> 是表格的行，其中包含th或td元素
< td>< /td> 是表格的格子，文本通常左对齐
< th>< /th> 与td类似，是表格的表头单元格，文本会自动居中加粗
table常用属性：
border 表格的边框
width 表格的宽度
height 表格的高度
align 表格的对齐方式tr常用属性：
align 每行中文本的水平对齐方式
valign每行中文本的垂直对齐方式
bgcolor 设置每行的背景颜色
td常用属性：
rowspan 纵向合并
colspan 横向合并
-
表单< form>< /form>
表单的作用： 用于向服务器传输数据。form是块级元素，即会自动换行。提交表单时，必须设置单元格的name属性值，否则无法获取数据。表单需要结合表单元素一起使用。
form的常用属性：
action 提交表单的地址
target 提交数据时打开窗口的方式
1._self 当前窗口 2._blank 新的空白窗口
method 提交方式（get提交和post提交）二者的区别：
1.post需要服务器的支持
2.get请求时参数会跟在浏览器地址栏的后面，而post请求不会（post请求会将数据存放在请求体中）
3.get请求传递的数据长度是有限的，而post基本没有限制（长度与服务器有关）
4.get比post快2倍左右
5.get请求有缓存（会将数据存放在浏览器中，即本地磁盘），而post请求无缓存
< form action=“服务器地址” method=“提交方式” target=“窗口打开方式”>
补充一点：接下来要介绍的表单元素其实也就是一个个标签，可以不写在form里面，但如果想把表单元素提交，则必须写在表单里面。 -
提交标签input（form的一个元素）
常用属性：
A. type 元素的类型~text 文本框 ~password 密码框 ~radio 单选框 ~checkbox 复选框 其中radio与checkbox有一个属性是 checked，意思为初始时是否被选中 ~file 文件域，用于提交文件 ~button 普通按钮 ~submit 提交按钮 ~reset 重置按钮 ~data 日期框 ~image 图像按钮，有src，功能是使用图像代替submit按钮， 图像的源文件名由src属性指定B. value 元素的值
对于不同的输入类型，value 属性的用法也不同：-
type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
-
type=“text”, “password”, “hidden” - 定义输入字段的初始值
-
type=“checkbox”, “radio”, “image” - 定义与输入相关联的值
注意：< input type=“checkbox”> 和 < input type=“radio”> 中必须设置 value 属性.
注意：value 属性无法与 < input type=“file”> 一同使用。
C. readonly 只读状态（不可修改）
D. maxlength 允许的最大输入长度
E. name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
注意：
1.单选框需要通过name属性设置为一组。input 不是块级，不会自动换行；
2.如果是需要上传文件的表单，则表单需要设置一个属性 enctype=“multipart/form-data”,且提交方式为post请求（因为需要上传的东西多）。 -
-
textarea w3school详细解释和label标签
textarea：该标签定义多行文本输入控件，文本区域可容纳无限数量的文本，可以通过cols（可见宽度）和rows（可见高度）属性来规定textarea的尺寸。label：< label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。< label> 标签的 for 属性应当与相关元素的 id 属性相同。
17.button标签
与input中的基本一致，
区别：button是双标签，标签之间可以添加内容（文本或标签等）；button当不赋type值时，默认为提交按钮。
18.下拉框标签< select>< /select> 下拉框选项标签< option>< /option>
select常用属性：
multiple 设置下拉框可多选
size 设置下拉框可见选项数目
disabled 禁用元素（多大多数标签都有用）
option 常用属性：
selected 默认选中项
disabled 禁止某个选项
value value=“内容” 提交给服务器的数据为“内容”
注意：如果设置了value的属性值，则提交的是value对应的值；如果未设置，则提交的是双标签中的文本值
19.字符实体
解决的问题：比如想在屏幕上显示< hr>,会被默认为水平线，可用字符实体解决。
< <>
空格  
版权声明 ©
三、补充
-
标签的分类：HTML中标签元素有三种分类，块级元素，行内元素，行内块级元素
块级元素：自动换行，可设置宽度高度
行内元素：不能自动换行，不可设置宽度高度
行内块级元素：不能自动换行，可设置宽度高度 -
对< input>标签的name属性的理解：
name属性规定input元素的名称。用于对提交到服务器的表单数据进行识别，只有设置了name属性的表单元素才能在提交表单时传递他们的值说白了就是有一个身份证，告诉后台服务器我是属于哪里的数据。 -
对< input>标签的value属性的理解：
value属性为input元素设定值。
对于不同的输入类型，value 属性的用法也不同：~type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
~type=“text”, “password”, “hidden” - 定义输入字段的初始值
~type=“checkbox”, “radio”, “image” - 定义与输入相关联的值注释：value 属性无法与 < input type=“file”> 一同使用。
< input type=“checkbox”> 和 < input type=“radio”> 中必须设置 value 属性。
扫一扫
3942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
