Lucifer的小教程：WEB基础篇丨上
本人于 4 年前整理 现在可能不是太全
<xxx></xxx>双标记
<xxx/>单标记
<!DOCTYPE html>文档声明标记
<html>根标记
<head>头部信息
<meta charset="UTF-8">元信息 字符集型号UTF-8
<meta name="名称" content="值"/> name：提供搜索内容名称 content：提供对应的搜索内容值
<title>简单的网页</title>标题标签
<link rel="stylesheet" type="text/css" href="index1.css"/>引用外部文件标记
<link rel="stylesheet" type="text/css" href="index1.css"/>
rel:表示定义一个外部样式表
type：1、text/css：引用外部文档类型为css样式表
：2、text/javascript：引用外部文件类型为javascript脚本
href：指定应用外部文档的地址
<style type="text/css">内嵌式css样式
</style>内嵌样式标记 只存在<head>标记中
</head>
<body>主体标记
<hr/>作用：水平线
<br/>作用：换行符
<h1></h1>标题标记 最大
<h6></h6>标题标记 最小
<p align="left<!--/right/center-->"></p>
段落标记 align（属性）：标题文字左对齐（默认）/右对齐/居中对齐
<p><font face="微软雅黑" size="7" color="red"></font></p>文本样式标记font
face：文本字体 size：文本大小 color：文本颜色
文本格式化标记 PS：XHTML推荐使用后一种
<b></b> <strong></strong>文字以粗体方式显示
<i></i> <em></em>文字以斜体方式显示
<s></s> <del></del>文字以加删除线方式显示
<u></u> <ins></ins>文字以加下划线方式显示
表示空格
图像标记：
<img src="图像URL"/>src为指定图像文件的路径和文件名
img标记的属性
src：图像的路径
alt：图形不能显示时的替换版本
title：鼠标悬浮时显示的内容
width/height/border：宽/高/边框宽
vspace：图像顶部和底部的空白（垂直边距）
hspace：图像左侧和右侧的空白（水平边距）
align：left/right/top/middle/bottom
<!--配合css注释 选择器-->
<div class="love"></div>
<div id="you"></div>
<!--配合css注释 标签式指定选择器-->
<p class="special"></p>
<h3 class="special"></h3>
<!--配合css注释 后代选择器-->
<p><strong></strong></p>
<strong></strong>
<!--列表与超链接-->
<!--1.无序列表-->
<ul></ul>-<li></li> <!--type属性值:-->
<!--disc:默认值 实心点-->
<!--circle:空心点-->
<!--square:实心正方形-->
<!--2.有序列表-->
<ol></ol>-<li></li> <!--type属性值:-->
<!--1-->
<!--a或A-->
<!--i或-->
<!--start属性值:数字 规定项目符号的起始值-->
<!--value属性值:数字 规定项目符号的数字-->
<!--3.定义列表-->
<dl> <!--标记用于指定定义列表-->
<dt></dt> <!--标记用于指定术语名词-->
<dd></dd> <!--标记用于对名词进行解释和描述-->
</dl>
<!--list-style复合属性-->
<!--list-style：列表项目符号 项目列表符号的位置 列表项目图像;-->
<!--4.超链接标记-->
<!--<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>-->
<a></a><!--属于行内标记-->
<!--herf：用于指定链接目标的url地址，当<a>标记为herf属性时，它就具有了超链接的功能-->
<!--target：用于指定链接页面的打开方式分_self和_blank两种 前者默认值在原窗口打开，后者是在新窗口打开-->
<a href="#" target="_blank"></a>
<!--链接伪类 由标记名、类名或id名加“：”构成-->
<!--
a：link 指未访问时超链接的状态
a：visited 指访问后时超链接的状态
a：hover 指鼠标经过、悬浮停过时超链接的状态
a：active 指鼠标单击不动时超链接的状态
-->
<!--HTML表单-->
<!--常用表单控件-->
<!--1.--><input type="" name="" id="" value="" /> <!--表单输入控件，可定义多种表单项-->
<!--2.--><textarea name="" rows="" cols=""></textarea> <!--定义多行文本框-->
<!--3.--><select name=""> <!--定义一个下拉列表，必须包含列表项-->
<option value=""></option>
</select>
<!--创建表单-->
<!--
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
-->
<!--action：用于指定接收并处理表单数据的服务器程序的url地址-->
<!--method：提交方式get/post 前者默认值保密性差且有数据量的限制，后者保密好没有数据量限制-->
<!--input控件-->
<!--<input type="控件类型"/>-->
<!--
type：text：单行文本输入框
password：密码输入框
radio：单选按钮
checkbox：复选框
button：普通按钮
submit：提交按钮
reset：重置按钮
image：图像形式的提交按钮
hidden：隐藏域
file：文件域
name/value
size：正整数：input控件在页面中的显示宽度
readonly：readonly：该控件内容为只读
disabled：disabled：第一次加载页面时禁用该控件
checked：checked：定义选择控件默认被选中的项
maxlength：正整数：控件允许输入最多字符数
-->
<!--textarea控件-->
<!--
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
-->
<!--select控件-->
<select>
<option>选项1</option>
</select>
<!--
select：size：指定下拉菜单的可见选项数
multiple：定义“multiple="multiple"”时，按住Ctrl同时选择多项
option：selected：定义“selected="selected"”时，当前项即为默认选择项
-->
<!--浮动与定位-->
<!--选择器{float：属性值；}-->
<!--
left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认）
-->
<!--清除浮动-->
<!--选择器{clear：left/right/both； 左/右/两侧}-->
<!--
overflow:
visible:内容不会被修改，会呈现在元素之外 默认值
hidden:溢出内容会被修剪，并且被修剪的内容是不可见的
auto:在需要时产生滚动条，即自适应所要显示的内容
scroll:溢出内容会被修剪，且浏览器会始终显示滚动条
-->
<!--定位属性-->
<!--选择器{position:属性值;}-->
<!--
position：
static:自动定位（默认）
relative:相对定位，相对于其原文档流的位置进行定位
absolute:绝对定位，相对于其上一个已经定位的父元素进行定位
fixed:固定定位，相对于浏览器窗口进行定位
-->
<!--边偏移设置方式-->
<!--
top：顶端偏移量，定义元素相对于其父元素上边线的距离
bottom：底部偏移量，定义元素相对于其父元素上边线的距离
left：左部偏移量，定义元素相对于其父元素左边线的距离
right：右部偏移量，定义元素相对于其父元素右边线的距离
-->
</body>
</html>
哈哈哈
共有 0 条评论