从HTML开始 1.常用的标签 2.单标签和双标签 3.相对路径和绝对路径 4.超链接  a标签 6.锚链接 8.行级标签、块级标签 P标签 段落标签:自动换行,段前段后间隔比较大 9.表格table 10. 表单元素表单form:将前台填写的数据传到后台 12.一些属性 13. 网页框架  14.标注  

 

从HTML开始
1.常用的标签
2.单标签和双标签
3.相对路径和绝对路径
4.超链接  a标签
6.锚链接
8.行级标签、块级标签
P标签 段落标签:自动换行,段前段后间隔比较大
9.表格table
10. 表单元素表单form:将前台填写的数据传到后台
12.一些属性
13. 网页框架
 14.标注
 

<html>:做网页,是一种超文本标记语言

    超文本:既有添加文本的能力,还可以添加图片,视频等多媒体元素。

    标记:由标签组成。不同的标签有不同的效果。

         开始标签,结束标签。 如:张三开始 - 张三结束。

<title>:标题内容</title>是整个网页的标题标签。

<!doctype html><!--文档声明,告诉浏览器以什么样的标准来解析该网页-->

<html><!--根标签的开始-->

<head><!--头部标签的开始-->

<meta charset="utf-8"><!--设置网页的编码,设置UTF-8,可防止中文乱码-->

<title>我的第一个html文件</title><!--设置网页的 标题-->

</head><!--头部标签的结束-->

<body><!--身体标签的开始-->

hello阿萨德

</body><!--身体标签的结束-->

</html><!--根标签的结束-->

从HTML开始
1.常用的标签
2.单标签和双标签
3.相对路径和绝对路径
4.超链接  a标签
6.锚链接
8.行级标签、块级标签
P标签 段落标签:自动换行,段前段后间隔比较大
9.表格table
10. 表单元素表单form:将前台填写的数据传到后台
12.一些属性
13. 网页框架
 14.标注
  

标题标签字体加粗  h1~h6 字体逐渐变小,自动换行  

换行标签   <br/>

标尺线标签  <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.相对路径和绝对路径

html导入外部资源

    相对路径

      相对当前页面的位置,去寻找另外一个资源

      ./  当前目录 

      ../  上一级目录

      ../../ 上二级目录 

    绝对路径

      从网站根目录寻找另外一个资源

    ./是同级
    ../是去上一级
    ../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.转义字

&nbsp; 空格

&lt;    <

&gt;    >

&copy; ©版权符号

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有缩进

从HTML开始
1.常用的标签
2.单标签和双标签
3.相对路径和绝对路径
4.超链接  a标签
6.锚链接
8.行级标签、块级标签
P标签 段落标签:自动换行,段前段后间隔比较大
9.表格table
10. 表单元素表单form:将前台填写的数据传到后台
12.一些属性
13. 网页框架
 14.标注
 

8.行级标签、块级标签

P标签 段落标签:自动换行,段前段后间隔比较大

  行级标签:不会自动换行,设置宽高无效,比如:a ,strong

  块级标签:会自动换行,可设置宽高  h1 ,  h2  , p

  行内块:不会自动换行,可设置宽高  比如  img

 

9.表格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

10. 表单元素表单form:将前台填写的数据传到后台


action:设置提交的地址
method:设置提交方式(post,get)
https://www.taobao.com/?user=zhangsan&pwd=123
文本输入框:
<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 普通按钮 <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:将网页上下分割 两者对比 Iframeframeset灵活,在使用frameset时需删除body,并且也不能添加其他的元素到网页中,而iframe可以,并且iframe可以嵌套在其他标签里,位置是任意的。推荐使用iframe.

 14.标注

<input id="man" type="radio">
<label for="man"></label>

从HTML开始
1.常用的标签
2.单标签和双标签
3.相对路径和绝对路径
4.超链接  a标签
6.锚链接
8.行级标签、块级标签
P标签 段落标签:自动换行,段前段后间隔比较大
9.表格table
10. 表单元素表单form:将前台填写的数据传到后台
12.一些属性
13. 网页框架
 14.标注