从HTML开始
<html>:做网页,是一种超文本标记语言。
超文本：既有添加文本的能力，还可以添加图片，视频等多媒体元素。
标记：由标签组成。不同的标签有不同的效果。
开始标签，结束标签。 如：张三开始 - 张三结束。
<title>:标题内容</title>是整个网页的标题标签。
html导入外部资源
相对路径
相对当前页面的位置，去寻找另外一个资源
./ 当前目录
../ 上一级目录
../../ 上二级目录
绝色路径
从网站根目录寻找另外一个资源
<!-------------------------------------------------------------------------------------------->
<!doctype html><!--文档声明，告诉浏览器以什么样的标准来解析该网页-->
<html><!--根标签的开始-->
<head><!--头部标签的开始-->
<meta charset="utf-8"><!--设置网页的编码，设置UTF-8,可防止中文乱码-->
<title>我的第一个html文件</title><!--设置网页的 标题-->
</head><!--头部标签的结束-->
<body><!--身体标签的开始-->
hello阿萨德
</body><!--身体标签的结束-->
</html><!--根标签的结束-->
<!-------------------------------------------------------------------------------------------->
1.常用的标签
l 标题标签字体加粗 h1~h6 字体逐渐变小，自动换行
换行标签 <br/>
标尺线标签 <hr/> / 可以省略 <hr>
marquee 弹幕效果
direction 方向
left(左) right（右） up（上） down（下）
scrollamount 设置速度，值越大，越快
behavior
scroll(循环滚动)
slide 一次，走完即停
alternate 交替滚动（来回滚动）
height 设置高度
加粗 strong b
斜体 i em
图像标签 img
src 图片的路径(相对路径和绝对路径)
title 鼠标悬浮在图片上显示的内容
alt 图片无法加载时，显示的内容
<!-------------------------------------------------------------------------------------------->
2.单标签和双标签
单标签:单独一个标签 比如<br>…
双标签：成对存在的，比如<h1></h1>…
<!-------------------------------------------------------------------------------------------->
3.相对路径和绝对路径
./是同级
../是去上一级
../images/a1.jpg,去当前文件的上一级寻找名字为images的文件夹,再到images文件夹下面寻找a.jpg
<!-------------------------------------------------------------------------------------------->
4.超链接 a
|
<a href="http://www.baidu.com" target="_blank"> 点击</a> |
|
href：设置要打开的链接 |
|
target：设置在何处打开 _self:在本窗口打开 _blank:在新窗口打开 还可在iframe中打开 _top：回到顶部 |
<!-------------------------------------------------------------------------------------------->
5.转义字
空格
< <
> >
© ©版权符号
<!-------------------------------------------------------------------------------------------->
6.锚链接
定义一个锚点
|
<a name="mao">锚点位置</a> |
跳到锚点位置
|
<a href="#mao">跳到锚点</a> |
7.列表
有序列表
|
<ol type="I" start="2"> <!-- 定义一个有序列表 --> <li>第1项</li><!-- 定义一个列表项 --> <li>第2项</li> <li>第3项</li> <li>第4项</li> <li>第5项</li> </ol> |
|
type：设置序号的类型 A a 1 i I |
|
start:设置开始序号 |
无序列表
|
<!--disc黑点 circle圆 square黑方块 --> <ul type="square"> <li>11</li> <li>22</li> <li>33</li> <li>44</li> </ul> |
自定义列表
|
<dl> <dt>张艺兴</dt> <dd>是一个....</dd> </dl> |
|
dd相对于dt有缩进 |
<!-------------------------------------------------------------------------------------------->
8.P标签
段落标签：自动换行，段前段后间隔比较大
<!-------------------------------------------------------------------------------------------->
9.行级标签、块级标签
行级标签：不会自动换行，设置宽高无效，比如：a ,strong
块级标签：会自动换行，可设置宽高 h1 , h2 , p
行内块：不会自动换行，可设置宽高 比如 img
<!-------------------------------------------------------------------------------------------->
10.表格table
行，列，单元格，边框，内容位置，合并
基本结构
|
<table border="1" width="400" height="400"> <tr> <td align="left">11</td> <td></td> <td></td> <td></td> </tr> </table> |
|
顺序：table>tr>td |
|
tr：行 |
|
td :单元格 |
|
对一个td设置width, 那该列的width都是一样的（列宽） |
|
对一个td设置height, 那该行的height都是一样的（行高） 和把height设置在tr上是一样的效果 |
|
align: 设置在td上，是设置该td内容的水平位置 left（左）,right（右）,center(中) 设置在tr上，是设置该tr里所有td内容的水平位置 |
|
valign: 设置在td上，是设置该td内容的垂直位置 top（上）,middle（中）,bottom(下) 设置在tr上，是设置该tr里所有td内容的垂直位置 |
|
cellspacing：设置单元格之间的距离 cellpadding：设置单元格内容与单元格之间的距离 |
|
colspan:跨列（左右合并） colspan=”n” 对应的该tr要删n-1个td |
|
rowspan:跨行（上下合并） rowspan=“n” 对应的下n-1的每一行都要删除一个td |
<!-------------------------------------------------------------------------------------------->
11. 表单元素
表单form:将前台填写的数据传到后台
|
<form action="http://www.taobao.com"> </form> |
|
action:设置提交的地址 method：设置提交方式（post,get） |
文本输入框：
|
<input type="text" > |
密码框
|
<input type="password" > |
提交按钮
|
<input type="submit"> |
单选框
|
<input type="radio" name="sex">男 <input type="radio" name="sex">女 |
复选框
|
<input type="checkbox" name="love"> 看电影 <input type="checkbox" name="love"> 打球 <input type="checkbox" name="love"> 敲代码 |
下拉选择
|
<select name="stu" > <option value="ben">本科</option> <option value="yan">研究生</option> <option value="bo">博士</option> </select> |
textarea 多行文本域
|
<textarea name="" cols="30" rows="5" > 11111 </textarea> |
图片提交按钮
|
<input type=“image” src=“路径”> <input type=“submit”> |
|
|
重置按钮
|
<input type="reset"><!-- 重置按钮，清空表单 --> |
普通按钮
|
<input type="button" value="按钮"> |
文件选择
|
<input type="file"> 用于文件上传 |
隐藏域
|
<input type="hidden"> 在页面不展示 |
<!-------------------------------------------------------------------------------------------->
12.一些属性
placeholder 表单提示信息
readonly 只读
disable 不可用，不会提交
required 必填
hidden 隐藏
checked 单选、复选的默认选中
selected 下拉选择框的默认选中
<!-------------------------------------------------------------------------------------------->
13. 网页框架
iframe
|
<iframe width="500" height="500" src="http://www.taobao.com" frameborder="1"></iframe> |
|
src=网页的路径 |
|
frameborder 边框 |
|
scrolling="no" 去掉滚动条 yes 加上滚动条 |
frameset
|
<frameset cols="25%,*"> <frame src="http://www.baidu.com"></frame> <frame src="http://www.baidu.com"></frame> </frameset> |
|
Cols:将网页左右分割 Rows:将网页上下分割 |
两者对比
Iframe比frameset灵活，在使用frameset时需删除body,并且也不能添加其他的元素到网页中，而iframe可以，并且iframe可以嵌套在其他标签里，位置是任意的。推荐使用iframe.
<!-------------------------------------------------------------------------------------------->
14.标注
|
<input id="man" type="radio"> <label for="man">男</label> |
<!-------------------------------没了233333--------------------------------------------->
随机推荐
- golang 处理 json 结构体
首先 我们来看一下这个json 字串 { "resp": { ", "respMsg": "成功", "app" ...
- PHP mysqli_stmt_bind_param MySQLi 函数
定义和用法 mysqli_stmt_bind_param - 将变量绑定到准备好的语句作为参数 版本支持 PHP4 PHP5 PHP7 不支持 支持 支持 语法 mysqli_stmt_bind_pa ...
- windows 应急流程及实战演练
前言 本文摘自信安之路公众号的文章. 当企业发生黑客入侵.系统崩溃或其它影响业务正常运行的安全事件时,急需第一时间进行处理,使企业的网络信息系统在最短时间内恢复正常工作,进一步查找入侵来源,还原入侵事 ...
- 【JDBC】CRUD操作
JDBC的CRUD操作 向数据库中保存记录 修改数据库中的记录 删除数据库中的记录 查询数据库中的记录 保存代码的实现 package demo1; import java.sql.Connectio ...
- Android Studio如何配置CURL指令一键打包apk上传至蒲公英
Android Studio如何配置CURL指令一键打包apk上传至蒲公英 第一步:在所需要打包的模块build.gradle文件中加入如下代码: android{ buildTypes { //配置 ...
- 43-安装 Docker Machine
前面我们的实验环境中只有一个 docker host,所有的容器都是运行在这一个 host 上的.但在真正的环境中会有多个 host,容器在这些 host 中启动.运行.停止和销毁,相关容器会通过网络 ...
- Linux命令(自己工作常用)
添加用户--root角色才有权限 useradd -d主目录 -m username useradd -d /home/hadoop2 -m hadoop2; 删除用户 userdel -f user ...
- Druid-代码段-1-5
所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程1.4,抛弃连接: //丢弃连接 public void discardConnection(Connection real ...
- 前端如何快速定位问题传参 和false
今天下午在请求接口的时候,出现了一个问题就是 传参问题 接口是请求成功的200,但是修改后返回来的却是500,这就很纳闷怎么会这样了. 经过查找,原来是因为传参问题.将有一个name:0 传递成了n ...
- The 2019 Asia Nanchang First Round Online Programming Contest
传送门 A. Enju With math problem 题意: 给出\(a_1,\cdots,a_{100}\),满足\(a_i\leq 1.5*10^8\). 现在问是否存在一个\(pos\), ...