前端学习之-Html


Html css js 三者之间的关系:
html就是在前端页面上展示给用户的效果;
css就是把展示给用户的页面按照一定的规则给布局起来;
js就是把布局好的页面效果给动态起来。

Html就是超文本标记语言,在页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

html文档树结构图:
根元素:{head 元素(meta元素,title元素),body元素(div,p,span)}

什么是标签:
1,有一对尖角号包裹起来的单词构成;
2,标签不区分大小写,推荐使用小写;
3,标签分为2部分,开始标签和结束标签;
4,自闭和标签;
5,标签可以嵌套,但是不可以交叉嵌套。


标签的属性:
1,通常是以键值对形式出现的. 例如 name="alex";
2,属性只能出现在开始标签 或 自闭和标签中;
3,属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex";
4,如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly。


Head标签:

Body标签:

1:基本标签:
<hn>,<p>,<b>,<strong>
<strike>,<em>,<sup><sub>
<br>,<hr>,<div>,<span>
-----------------------------------------------------------------
2:图形标签<img>
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
-------------------------------------------------------------------

3:超链接标签<a>
<a target=_blank href="www.baidu.com">百度<a/>
--------------------------------------------------------------
4:列表标签
<ul>
<li><li/>
<li><li/>
<ul/>

<ol>
<li><li/>
<li><li/>
<ol/>

<dl> 定义列表

<dt> 列表标题
<dd> 列表项
------------------------------------------------------------------------
5:<table>标签

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
像素 百分比.(最好通过css来设置长宽)
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
<th>: table header <tbody>(不常用): 为表格进行分区.

-------------------------------------------------------------------------
6:<form>标签

1:表单用于向服务器传输数据。
表单能够包含:input元素,比如文本字段、复选框、单选框、提交按钮等等,
表单还可以包含textarea、select、fieldset和label元素。

2:action: 表单提交到哪.一般指向服务器端一个程序, 程序接收到表单提交过来的数据
(即表单元素值)作相应处理,比如https: // www.sogou.com / web,
https://www.baidu.com/

3:method: 表单的提交方式post / get默认取值

4:<input>:type:text,password,radio,chexkbox,submit,button,file(enctype="multipart/form-data")

5:<textarea>
name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行

6:<select>
name:表单提交项的键.
size:选项个数
multiple:multiple

<option> 下拉选中的每一项 属性:
value:表单提交项的值. selected: selected下拉选默认被选中
<optgroup>为每一项加上分组


7:<fieldest>
<fieldset>
<legend>登录吧</legend>
<input type="text">
</fieldset>

8:<label>
<label for="www">姓名</label>
<input id="www" type="text">


原文地址:https://www.cnblogs.com/g-123456/p/6225778.html