谁还不是初学前端的小朋友啊

最新推荐文章于 2024-09-12 19:13:21 发布

汤圆baby呀

最新推荐文章于 2024-09-12 19:13:21 发布

阅读量260

点赞数

文章标签： web html css 前端初学

本文链接：https://blog.csdn.net/BINGXIN1224/article/details/89381870

版权

Wbe标准
兼容性是浏览器中最难解决的问题，由于无法改变浏览器，所以用统一的语言，写的代码标准化。
三部部分组成：《1》结构：html
《2》表现：css 让网页更漂亮
《3》行为：js :Javascript
HTML:html是超文本标记语言，用来描述网页的语言。HTML不是编程语言，是标记语言。用文字来表示的标记语言。
超文本：除了文字之外，还可以有图片，链接
HTML有自己的格式规范
基本骨架：<html>
<head>
<tittle><tittle>
</head>
<body>
</body>
</html>

<html></html>根标签
<head></head>头部
<tittle><tittle>文档标题
<body><body>文档主题
html标签分为1.双标签；类似<head> </head>
2.单标签：<br/>
html标签的关系：1.<head>与<tittle> 父子关系
2.<head>与<body>并列关系

字符集：utf-8是目前最常用的字符，它包含全世界国家所用到的字符。

标签：语义化标签：在合适的地方用合适的标签，一眼看过去就知道那个是重点
html和css是两种完全不同的语言
排版标签：
1.标题标签：标题标签有6级，分别是：<h1></h1>;<h2></h2>;<h3></h3>;<h4></h4>;<h5></h5>;<h6></h6>
这六个级别，标题字体逐渐变小。
2.段落标签 paragraph
<p>文本内容</p> 默认自动换行
3.水平线标签：是一个单标签。<hr />
4.换行标签：<br /> break
段落与段落之间距离较大，而换行距离较小。

div span 标签
没有语义，使我们网页布局主要的两个盒子：css+div

<div>通信与信息工程学院</div>
<div>信息安全专业</div>
会在网页上产生：通信与信息工程学院
信息安全专业

<span>通信与信息工程学院</span>
<span>信息安全专业</span>
会在网页上产生：通信与信息工程学院信息安全专业
文本格式华标签：1.<b></b><strong></strong>加粗字体的作用
2.<i></i><em>倾斜的作用
3.<s></s><del></del>加删除线的作用
4.<u></u><ins><ins>加下划线的作用
特殊字符标签：1、空格符的字符代码是：
2,<的字符代码是<
3.>的字符代码是&rt；
注释标签：注释主要是写给队友看的；

路径：
页面找图片的路径
1.相对路径有三种
（1）图片文件夹和html文件同一路径
<img src=“图片文件夹名称”/>

(2)图片文件在html文件下一路径
<img src=“文件夹/图片文件夹”/>
(3)上一路径
<img src="…/图片文件夹"/>
2.绝对路径：
在能上网的情况下，右击复制图片地址 <img src=“图片地址”/>
l
列表标签：
1.无序列表
<ul>
<li>苹果</li>
<li>柠檬</li>
<li>橙子<li>
</ul>
注意 <ul></ul>标签中只能放<li></li>标签
而<li></li>标签中则可以放其他标签

2.有序列表
<ol>
<li>苹果</li>
<li>柠檬</li>
<li>橙子</li>
</ol>
3.自定义标签
<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
\dt>名词2</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>

表格：主要目的是显示数据；能手写表格结构，并合并单元格
创建表格：<table border=“1”>
行<tr></tr>
列<td></td>
属性： 1.border 设置表格的边框
2.cellspacing 设置单元格与单元格边框之间的空白间距
3.cellpadding设置单元格的内容与单元格边框之间的空白间距
4.width 设置表格的宽度
5.height设置表格的高度
6.align设置表格在网页中的对齐方式 center left right
一般情况下，三参为0：border cellspacing cellpadding 为0

表头标签：（单元格表头）<th></th>
表格标题：<table>
<caption>我的表格标题</caption>
</table>
caption紧随table之后；只存在表格里面
表格结构：<thead></thead>
<tbody></tbody>
合并单元格：rowspan跨行合并
colspan跨列合并
注意：1.先确认是跨行还是跨列
2.先上后下先左后右
删除的个数=合并的个数-1
表单标签：目的:收集信息
1.表单控件
2.提示信息
3.表单域
属性属性值描述
t type text 单行文本输入框：<td><input type=“text”/></td>
pasword 密码输入框：<td><input type=“password”/></td>
radio 单选按钮：<td>性别</td>
<td>
男<input type=“radio” name=“xx”/>
女<input type=“radio” name=“xx”/>
</td>
checkbox 复选框：<tr>
<td>喜欢的类型：</td>
<td>
妩媚<input type=“checkbox” name=“xx”/>
漂亮<input type=“checkbox” name=“xx”/>
温柔<input type=“checkbox” name=“xx”/>
</td>
button 普通按钮：<td><input type=“button” value=“注册”/></td>
submit 提交按钮：<td><input type=“submit” value=“提交”/></td>
reset 重置按钮：<td><input type=“reset” value=“重置”/></td>
image 图像形成的提交按钮：<input type=“image” src=“xx.xx”/></td>
file 文件域：上传图像<input type=“file”/>
name 由用户自定义控件的名称
value 由用户自定义 input控件中的默认文本值
size 正整数 input控件在页面中显示的宽度
checked checked 定义选择控件默认被选中的项：女<input type=“radio” name=“xx” “checked”=“checked”/>

l label标签
为input服务
<html>
<body>
<label>用户名：<input type=“text”></label>
例如：<label for=“pwd”>
用户名：<input type=“text”>
密码：<input type=“password” id=“pwd”>
</lable> 使用这种标签以后，点文字可以直接在输入框输入内容

textarea控件（文本域）
例： <td>给我留言/
<td> /<textarea name" " id=" " cols=“30” rows=“10”>/
/

下拉菜单：select选择
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
例如：
<select>
<option>选择年份</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
</select>
<select>
<option>选择月份</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
</select>
表单域：
用户名<input type=“text”>

密码：<input type=“password”>
<input type="submit"value=“提交”>
<input type="reset"value=“重置”>

常用属性：1.action 在表单收集到信息后，需要将信息传输给服务器进行处理、action属性用于提
交接受并处理表单数据的服务器程序的url地址。
2.method：用于设置表单数据的提交方式，其取值为get或post
3.name：用于指定表单的名称，以区分同一个页面中的多个表单。
注意：每个表单都应该有自己的表单域
<body>
<form action=" " method=“get”>
用户名：<input type=“text” name=“yonghuming”><br /><br />
密码：<input type=“password” name=“mima”><br /><br />
性别: <input type=“radio” name=“sex”>
<input type=“submmit” value=“提交所填”>
<input type="reset’ value=“重新填写”>
</form>
</body>