html基础知识

HTML超文本标记语言，是一种标记语言，不是编程语言

CSS 层叠样式表

JS行为 浏览器最基本的脚本语言

lang=”en”（定义文档为英文）

lang=”zh-CN”（定义文档为中文）

<meta charset=”UTF-8”>（定义字符集，不写会产生乱码）

 

1. 标题标签

<h1>标题标签</h1>在页面中只能有一个，h1-h6数字越大文字越小，权重值越低

font标签

size/color : <font size=’5’ color=’#0000’>潭州软件学院</font>  

size只能设置1-7 （size和color不常用）

p标签 （定义段落标签）<p></p>

    b标签（加粗）<b></b>

    strong    <strong></strong>

    <br />换行

<del>删除线</del>

<i>倾斜</i>

<em>倾斜</em>与strong一样有强调效果

sup上标  a²（即a的平方）

sub下标  H₂o（即化学方程式里的水）

<!--123-->注释

  空格

<  <

>  >

& &

¥  人民币

© 版权

® 注册商标

° 摄氏度

± 正负号

× 乘号

÷除号

² 平方2

³ 立方3

 

 

 

2. span 没有固定格式表现，对它应用样式时，他才会产生视觉变化。

span{  color:#fffff;font-size:20px; }

  <pre></pre> 可以预格式化文本，即写在pre里面是什么就怎么展示出来

  < 小于号   >大于号  

  <a hrep=’ http://........’>百度一下</a> 超链接 表示跳转到另一个页面

  target:用于指定链接的打开方式  _self为默认值， _blank为在新窗口中打开方式

 空连接：<a hrep=’ #’>百度一下</a>当前页面不跳转

外部链接：<a hrep=’http://...’  target=’_blank’>百度一下</a>表示新开了一个页面

下载压缩包或文件<a hrep=’images.zip’>点击下载</a>点击会实现下载功能

内部链接<a href=”kdd.html”></a>

网页元素都可以添加超链接，如照片等。

<a hrep=’mailto:2730948254@qq.com’>点击发送邮件</a>点击后会弹出发送邮件的窗口

 

锚点链接：<a href=’#a1’>点击跳转到del标签</a>点击跳转的按钮  （即最底层跳转到页面最顶层）   <p  id=’a1’></p>要跳转到哪里就放在哪里前面

 

 

1. 图片标签（最好采用相对路径）

   alt（图像显示不出来的时候用文字替换）

   title（显示文本 鼠标放在图像上，提示的文字）

 <img src=”img1.jpg”  alt=””我是pink老师  title=”我是pink老师”>

  .jpg 正常图片  .png 透明图片 .gif 动图

绝对路径：<img src=’图片路径 ’ />网址上图片可以之间粘贴

<img src=’图片路径 ’ />本地图片注意地址上的反斜杠

相对路径：1.建立images文件夹存储图片

        <img src=’images/1.png’ />

        2.图片和文件夹1在同一个目录，html在文件夹1里面

       <img src=’../1.png’ />

       3.图片在文件夹2里，html在文件1里面，文件夹1和文件夹2同一目录
 <img src=’../images/1.png’ />

       

  /路径符号

./ 当前目录

../返回上一层目录

  ../../返回上一层的上一层的目录

Alt:图片描述  title: 鼠标闪现图片提示  width:图片宽度  height:图片高度

<img src=’../images/1.png’ alt=’美女’ title=’ 点击查看更多’ width=’’ height=’’ />

 

1. 列表标签（内部嵌套的话，要插入<ol>或者<ul>）一般单行导航会用到ul里面只能放li

1. 无序列表:  ul {list-style:none;} （去掉前面圆点标志）

<ul type=’circle’> type=’circle’表示空心圆   type=’disc’表示实心圆   

             <li></li>用TAB键打空格        

            </ul>

2.有序列表：<ol><li></li><ol>

3.自定义列表：（上面有个总标签，下面有很多小标签）

<dl>  自定义列表以<dl>标签开始

                  <dt> </dt> 每个自定义列表项以<dt>开始

                        <dd></dd>  每个自定义列表项的定义以<dd>开始

              </dl>

 

4. CSS层叠样式表 （结尾要写分号）

   主要由两部分构成：选择器以及一条或多条声明。

   内部样式：div {width:100px; height:200px; background:#11111；}  （写在style里面）

     外部样式：<div style=’background:yellow;’></div>

5.div/span盒子

  有长度有宽度的长方形（一个div独占一行）span（一行可以放多个span）

 div{width:100px; height:200px; background:#11111；}

 

1.  
2. border边框线

  border:10px solid red;

  border-top: 10px solid blue; （单独规定上边框线，也可以制定left,right,bottom）

  border-width:30px;

  border-top-width:10px; （left-width,right-height...）

  border-color:#00000;

  border-top-color:#11111;

  border-style:none;

  Border-top-style:dashed；（虚线）

  Border-style边框风格：  1. none无边框    2. 实线solid     3. dashed虚线

1. dotted 点状线   5.double双线    6.groove凹槽      7.ridge垄状   8.inset inset边框   8.outset  outset边框

 

 

 

7.外边距  

margin-top,margin-left,margin-right,margin-bottom

          auto居中

  *{margin:100px;}   

   上下 左右：margin: 100px  100px;

   上  左右  下： margin:50px 100px 50px

   上 右 下 左： margin:20px  30px  40px  50px

margin: 50px auto;    （距离上面50px，左右居中）只能左右居中

 

内边距 （不支持负值）

padding-top,padding-right,padding-bottom,padding-left

 padding-top:20px / 10%

8.去掉下划线

  a{text-decoration:none;}（选中页面中所有的a标签，去掉a标签下划线）

  <a href=’#’></a>

 

9.根目录

   打开目录文件夹的第一层就是根目录。

 

10.表格

  <table align=”center” border=”1” cellpadding=’0” cellspacing=”0” width=”500” height=”240”></table>用于定义表格的标签

  <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中

<td></td>定义单元格，嵌套在行内<tr>内

<th>表头单元格 文字会居中加粗

<thead></thead>表格头部  里面一定有<tr>

<tbody><tbody>表格身体

表格属性：

align:left right center 规定表格相对周围元素的对齐方式

border：1或空  设置边框

cellpadding: 像素值  文字距离单元格之间的空白距离

cellspacing:  像素值  单元格与单元格之间的距离

width: 像素值或百分百  规定表格宽度

 

 

11.合并单元格：

1. 合并方式：

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

1. 目标单元格：

   跨行：最上侧单元格为目标单元格，写合并代码

   跨列：最左侧单元格为目标单元格，写合并代码

1. 步骤：

1. 确定跨行还是跨列。
2. 找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan=”2”></td>
3. 删除多余单元格。

 

12.表单

由表单域，表单控件，提示信息三部分组成。

 

1. <form action=”url地址” method=”提交方式” name=”表单域名称”></form> 将表单信息提交给后台

属性： action: url地址，指定接收并处理表单数据的服务器程序的url地址

method: get/post  用于设置表单数据的提交方式 取值为get或post

name:名称指定表单名称

 

2.表单控件（表单元素）

input: 输入表单元素 <input type=”属性”>   单标签

type属性： text 文本框  

例：用户名：<input type=”text” value=”请输入用户名” >

password  密码框  radio 单选按钮 （需要起一个相同的name属性）

男<input type=”radio” name=”sex”>女<input type=”radio” name=”sex”>

checkbox 复选框（需要起一个相同的name属性）

checked （当页面打开时，默认选择单选按钮或者复选按钮）

maxlength （规定输入字段中的字符的最大长度）

 <input checked=”checked”>

 <input type=”submit” value=”免费注册”>（提交按钮）

<input type=”reset”  value=”重新填写”>（重置按钮）

<input type=”button” value=”发送验证码”>（普通按钮）

<input type=”file” value=”上传文件”>

<label for=”text”></label><input type=”text” id=”text”>  （id和for相同）

 

3.下拉列表

<select>

<option selected=”selected”>省份</option>（默认省份）

<option>山东</option>

<option>北京</option>

</select>

4.文本域

<textarea  cols=”50” rows=”5”></textarea>

cols表示写的字数

rows表示可以写多少行