HTML(一)

来源：互联网发布：魔神召唤士网络骑士编辑：程序博客网时间：2024/06/06 18:34

一、互联网的基本原理

html:超文本标记语言css:层叠样式表http:超文本传输协议互联网基本原理：上网即请求数据网站与网页：.com——营利性组织.cn——中国.hk——香港.edu——教育机构.gov——政府机构域名：例如www.baidu.comDSN：域名解析五大浏览器厂商：IE，火狐（firefox）,谷歌（chrome）,欧朋（opera）,苹果（safari）

二、html中的标签
1、基本骨架

<html>    <head>    </head>    <body>    </body></html> html、head、body均为双标签2、常用标签<p></p>为段落标签<h></h>为标题标签（多个标题可以加角标）    <h1></h1> 标题一（**标题一在页面中只可使用一次**）    <h2></h2> 标题二    <h3></h3> 标题三    <h4></h4> 标题四    链接图片标签（单标签）：<img src="图片路径" alt=“描述” title="图片注释" width="宽" height="高">    *从一个文件夹出去（寻找图片路径）：../         *ctrl+鼠标悬停，若出现蓝线，则代表路径是通的    *控制图片大小：高和宽可任意设置一个值，即可让图片按比例缩小或放大超链接（双标签）：<a href="跳转目标地址" target="目标窗口">链接名</a>    *目标窗口：_blank 代表在新窗口打开             _parent  代表在源窗口打开<br>换行标签（单标签）<hr>分隔线标签（单标签）    <hr size="线的粗细" color="线的颜色" width="线的宽度">颜色的三种表示方法：    英文单词：red    十六进制数：#ff0000    RGB:（255,0,0）文本效果：<b> 定义粗体文字<em> 定义着重文字<i> 定义斜体字<small>定义小号字<strong> 定义加重语气<sub> 定义下标字<sup> 定义上标字<ins> 定义插入字<del> 定义删除字<pre></pre> 预格式化文本    *两种空格输入方式：        &nbsp;表示一个半角空格        全角状态下的空格3、三种列表的定义方式(1)无序列表<ul type="图标样式">    <li> </li></ul>    *type="square(方块)/disc(圆点)/circle(空心圆)"    默认为disc

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><ul type="circle">    <li>今天是万圣节</li></ul></body></html>

(2)有序列表<ol type="图标样式" start="起始排序"    <li> <li></ol>    *type="a/A/1/I/i"

<ol type="1" start="5"><li>今天是万圣节 </li>    <li>今天是万圣节 </li>    <li>今天是万圣节 </li>    <li>今天是万圣节 </li>    </ol>

(3)自定义列表<dl>    <dt>标题</dt>（可多次使用）    <dd>对标题的描述</dd></dl>

<dl>    <dt>万圣节</dt>    <dd>今天是难忘的一天</dd></dl>

4、表格

<table cellspacing="单元格间距" cellpadding="单元格填充" border="边框线"><caption></caption>    <tr>    <td></td>    </tr></table>    *table表示表格     tr 表示行     td 表示单元格     th 表示标题单元格     caption 表示表头     colspan="跨列数"     rowspan="跨行数"

<table border="1px" >    <caption>个人信息表</caption>    <tr>        <th width="150px">姓名</th>        <td width="150px">  </td>    </tr>    <tr>        <th>性别</th>        <td>  </td>    </tr>    <tr>        <th>年龄</th>        <td>  </td>    </tr>

5、表单<form action="提交目标地址"  method="get/post"></form>    *表单元素：     单行文本框  <input type="text"/>     多行文本域  <textarea></textarea>     密码框： <input type="password"/>     单选按钮 <input type="radio" name="">         注：name值相同表示单选按钮组     复选框：<input type="checkbox"/>     文件域：<input type="file"/>6、按钮提交按钮：<input type="submit"/>重置按钮：<input type="reset"/>普通按钮：<input type="button">按钮<button></button>7、下拉菜单、下拉列表(1)下拉菜单<select>     <option value="" selected></option></select>(2)下拉列表<select multiple>     <option value="" selected></option></select>

<form action="">    <p>        <label for="username">用户名</label>        <input type="text" id="username">    </p>    <p>        密码：<input type="password">    </p>    <p>        性别：<input type="radio" name="sex" checked>女 <input type="radio" name="sex">男    </p>    <p>住址：        <select>            <option value="陕西" selected>陕西</option>            <option value="山西" >山西</option>            <option value="内蒙古" >内蒙古</option>            <option value="北京" >北京</option>            <option value="上海" >上海</option>        </select>    </p>    <p>      上传照片：<input type="file" width="50px"  height="100px">    </p>    <p>        <input type="reset" >        <input type="submit">    </p></form>

三、html中的样式

1、样式定义：    (1)类定义：可以多次使用           要求：以点开始，后面用字母开头命名.name          调用：<any class="name"><any>    (2)id定义：只能用一次         要求：以#开头， #name         调用：<any id="name"></any>    (3)标签名定义  eg:  p{}2、样式调用方式：//页面内样式表(1)行内样式   范围：只在本页面中，其中行内样式范围只在这一行调用方式：<any style="样式名：样式值;"></any>(2)、页面内样式head中定义<style>.name{样式名：样式值;}</style>调用：<any class="样式名"></any>//外部样式表  范围只要链接都可以起作用3、链接式（链接页面外的样式）在head中链接<link rel="stylesheet" href="链接的外部css文件"/>4、导入式<style>    @import url(two.css);</style>

四、div(结构与样式的分离)

<div></div>    width:800px;/*宽*/    height:500px;/*高*/    margin:0 auto;  /*居中*/    border:solid 1px red;/*边框线：实线 1像素 颜色    线型：solid 实线 dashed 虚线 double 双线 dotted  点状线background-color:背景颜色background:背景颜色/背景图像background-image:背景图像background:greenyellow url(../img/img1.jpg) no-repeat right bottom;语法：background:背景色 背景图像 是否重复 水平位置 垂直位置；是否重复：no-repeat 不重复        repeat-x  水平重复         repeat-y  垂直重复         repeat   重复水平位置：left 左 ，center  中 ，  right 右 ，精确像素垂直位置：top  上 ，center  中 ，  bottom 下，精确像素margin  边距margin-left/margin-right/margin-top/margin-bottom    margin:a   表示四边边距都相同（单位：px/cm）    margin:a b  表示上下为a，左右为b    margin:a b c 表示上为a 左右为b 下为c    margin:a b c d 表示 上a  右b  下c  左dpadding  填充padding-left/padding-right/padding-top/padding-bottom    padding:a   表示四边填充都相同    padding:a b  表示上下为a，左右为b    padding:a b c 表示上为a 左右为b 下为c    padding:a b c d 表示 上a  右b  下c  左dline-height:  行高  行间距font-size:12px 字体大小font-family : 字体font-weight:bold;字体加粗font-style:italic；字体倾斜   normal 正常text-decoration:none/underline/overline   去下划线/加下划线/加上边线

五、超链接的4种状态（伪对象）

a:link    超链接访问前状态a:hover   鼠标悬停时的样式a:active  鼠标点击时的样式a:visited 超链接访问后的样式

阅读全文

0 0