前端：HTML入门基础

最新推荐文章于 2023-05-03 22:19:26 发布

w_viola

最新推荐文章于 2023-05-03 22:19:26 发布

阅读量268

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/wanngxue/article/details/78439308

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一、互联网的基本原理

html:超文本标记语言
css:层叠样式表
http:超文本传输协议
互联网基本原理：上网即请求数据
网站与网页：
.com——营利性组织
.cn——中国
.hk——香港
.edu——教育机构
.gov——政府机构
域名：例如www.baidu.com
DSN：域名解析
五大浏览器厂商：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  左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 超链接访问后的样式