HTML入门

2017.10.28

html:

网站是由网页构成的。

.com      .cn    .edu    .gov

DNS：域名解析

html：超文本标记语言

css：层叠样式表

编码：UTF-8

常见的Web浏览器：Opera / Chrome / Firefox / Safari / Internet Explorer

浏览文件快捷键：Alt+F2

测试路径：Ctrl+鼠标悬停

重命名：Shift+F6  / 右击-Refactor-Rename

<p></p>     段落

p标签中测试文字：lorem+Tab

<h1></h1>标题一

<h2></h2>标题二

<h3></h3>标题三

<h4></h4>标题四

<h5></h5>标题五

<h6></h6>标题六

<img src="图片路径" alt="描述" title="图片注释" width="宽" height="高"/>

超链接: <a href="跳转目标地址" target="目标窗口"></a>

目标窗口：_blank   在新窗口打开

                 _parent  在源窗口打开

相对路径 / 绝对路径

换行符    <br>

分隔线    <hr size="线的粗细" color="线的颜色" width="线的宽度">

颜色表示方式： red  英文单词  / #ff0000 / rgb(255,0,0)

文本效果：

<b>         定义粗体文本

<em>      定义着重文字

<i>          定义斜体字

<small>  定义小号字

<strong> 定义加重语气

<sub>     定义下标字

<sup>     定义上标字

<ins>      定义插入字

<del>      定义删除字

<pre></pre>  预格式化

网页中有两种输入空格方式:

  1. 表示一个半角空格  

  2. 全角状态下的空格

无序列表

<ul type="图标样式">

<li></li>

</ul>

type="square/disc/circle"  方块/圆点/空心圆    默认为disc

有序列表

<ol type="类型" start="起始数字">

<li></li>

</ol>

type="a A 1 I i"

自定义列表

<dl>

<dt>标题</dt>

<dd>描述</dd>

</dl>

表格

<table cellspacing="单元格间距" cellpadding="单元格填充" border="边框线">

<caption></caption>

<tr>

<td></td>

</tr>

</table>

table表示表格

tr 表示行

td 表示单元格

th 表示标题单元格

caption 表示表头

colspan="跨列数"

rowspan="跨行数"

表单：

<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"/>

提交按钮：<input type="submit"/>

重置按钮：<input type="reset"/>

普通按钮：<input type="button">

按钮：      <button></button>

下拉菜单 :

<select>

 <option value="" selected></option>

</select>

下拉列表 :

<select multiple>

 <option value="" selected></option>

</select>

2017.10.29

样式定义：

1、类定义   可以多次使用   要求：以点开始，后面用字母开头命名，  .name  

调用：<any class="name"><any>

2、id定义  只能用一次  要求：以及#开头，  #name

 调用：<any id="name"></any>

3、标签名定义  eg:  p{}

样式调用方式：

//页面内样式表

1、行内样式   范围：只在本页面中，其中行内样式范围只在这一行

<any style="样式名：样式值;"></any>

2、页面内样式       head中定义

<style>  .name{样式名：样式值;} </style>

<any class="样式名"></any>

//外部样式表  范围只要链接都可以起作用

3、链接式（链接页面外的样式）      在head中链接

<link rel="stylesheet"   href="链接的外部css文件"/>

4、导入式       在head中导入

<style>

        @import url(two.css);

</style>

结构和样式的分离

<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   表示四边边距都相同

margin:a b  表示上下为a，左右为b

margin:a b c 表示上为a左右为b下为c

margin:a b c d 表示 上a  右b  下c  左d

padding  填充

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  左d

line-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 超链接访问后的样式

css:

text-align:center;文本对齐方式：居中对齐

// left 左对齐，right右对齐，justify两端对齐，center居中对齐

font-size:25px; 字体大小为25像素

color:red; 字体颜色为红色

background-color:背景色

行内样式调用方式：

<any style=""></any>

text-indent:2em; 首行缩进两个em