初学html总结
时间:2019-08-17
本文章向大家介绍初学html总结,主要包括初学html总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
2019-08-17 17:58:49
html:超文本标记语言,用于网页结构的搭建
html语言构成:由标签、属性、属性值构成
标签:" < "后面第一个单词
属性:标签后面用空格隔开的单词
属性值:属性后用“ = ”连接并在“双引号”里面的叫做属性值
注:如果一个标签有多个属性值,用空格隔开
html结构的区域划分:
两个结构 head-描述区、body-内容区
html语法:
标签分类: 双标签(常规标记)、单标签(空标记)
双标记:
<标签 属性="属性值" 属性="属性值"> </标签>
<!-- eg --> <div class="box" id="box-1"> </div>
单标签:
<标签 属性="属性值" 属性="属性值">
<!-- eg --> <img src="" alt="">
html常用标签:
h1-h6: 标题标签,由大至小,h1 唯一性!在同一个页面内只能出现一次,放网站LOGO
i/em: 字体倾斜
b/strong: 字体加粗
u: 下划线标签
p: 段落标签
sup: 上行标签
sub: 下行标签
< : "<" 左尖角符号
> : ">" 右尖角符号
: 不换行空格
© : ©版权(copyright)
®: ®注册商标
div: 盒子(容器)作用:划分网页布局
span: 表示1字符或者一句简短的话
<!-- eg -->
<h1 align="center">holle word</h1> <!-- h1 具有唯一性! 在同一页面只能出现一次,放网站LOGO --> <h2>2号标题sad</h2> <h3>3号标题</h3> <h4>4号标题</h4> <h5>5号标题</h5> <h6>6号标题</h6> <strong>加粗</strong><br> <hr><!-- br换行 hr线条 --> <b>加粗</b> <i>倾斜</i> <em>倾斜</em> <u>下划线</u><sup>上行标签</sup><sub>下行标签</sub> <p>段落</p> <div>盒子</div> <span>少量字符</span> < br >©
列表:无序列表、有序列表、自定义列表
<ul>: 无序列表 <li>标签
<ol>属性:type(类型)="1、A、a、Ⅰ" start(开始于)="1、2、3..."
<dl>: 自定义标签 <dt>&<dd>
<dt>名词</dt>
<dd>对名词的解释</dd>
每组<dt>&<dd>写一个<dl>
<!-- 无序列表 --> <ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul> <!-- 有序列表 --> <ol type="A" start="4"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> <!-- 自定义列表 --> <dl> <dt>名词</dt> <dd>对名词的解释</dd> </dl> <dl> <dt>自定义列表</dt> <dd>按组写,每组<dt><dd>写一个<dl></dd> </dl>
超链接
a标签的属性:
href="目标的路径"
target="_self(默认值)/_blank(打开新的页面)"
target="#" 空连接,本页面跳转
target="##"空连接,不做跳转
target="javascript:void(0)" 空连接,不做跳转
默认样式:
文本蓝色、下划线
<a href="http://www.baidu.com">超链接</a><br> <a href="http://www.baidu.com" target="_blank" title="打开新页面">超链接</a><br> <a href="#">空连接,本网页跳转</a><br> <a href="##">空连接,不做跳转</a><br> <a href="javascript:void(0)">空连接,不做跳转</a>
title属性:
title="提示信息" 适用于所有标签
插入图片
img必须的属性:
src="url" 导入图片的路径
alt="文字" 图片路径发生错误时,文本替换图片、便于seo优化
title="文本" 提示信息
alt 和title属性的区别:
alt 文本替换图片、seo优化
title 提示信息、图片标题
例: <img src="./images/img1.png" alt="未找到此图片" title="提示信息"><br> <img src="./img2.png" alt=""> <img src="./img/img3.png" alt=""> <img src="../../../img.png" alt=""><br>
相对路径 :
首先确定自己当前位置(操作哪个文件,这个文件就是当前目录)
./ 当前目录 ../ 上一级目录
1、同级找同级: 直接写名称或./名称
2、父级找子级: ./文件夹名称/目标名称
3、子级找父级: 返回上一级...
绝对路径:D:\h5-1920\day1\images\img.jpg
表格:
表格的作用:显示数据
表格内的表格属性:
width="" 宽
height="" 高
border="" 框线宽度
bordercolor="" 框线颜色
cellspacing="0" 单元格之间的间距
cellpadding="0" 内容距离单元格的间距
align="center/left/right" 水平对齐方式
valign="top/bottom/middle" 垂直对齐方式
合并单元格:
规则:只要是单元格跨行的都是合并行,不跨行的就是合并列
合并行: rowspan="合并的数量"
和并列: colspan="合并的数量"
注:无论合并行还是和并列,操作的都是td
<table width="300" height="300" border="2" bordercolor="red" cellspacing="0" cellpadding="0"> <tr align="center"> <td>1</td> <td valign="bottom">2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>
表单:
表单的作用:收集用户信息
form表单:
表单元素尽量放在表单内
form的属性:
action="url(路径)" 表单提交的路径
neam="" 表单的名称
method="post/get" 表单的提交方式
post/get的区别:
表单元素:输入框、密码框、提交按钮、重置按钮、空按钮......
大部分是通过 input 标签实现
input标签属性:
type(类型)属性:input会根据type的属性值的不同,在页面的显示状态也不同
value属性:在输入框里面表示当前input的初始值 (value作用会根据type的改变而改变)
name属性:input的名称
size属性:设置input的尺寸,以字符为单位
maxlength属性:设置输入框输入字符的最大长度
type的属性值:
type="text": 显示的是文本框(输入框)
type="password": 密码框
type="submit": 提交按钮
type="reset": 重置按钮
type="button": 空按钮
<table width="300" heigh="400" border="1" bordercolor="blue" cellspacing="0" cellpadding="0"> <form action=""> <tr> <td rowspan="4">总体信息</td> <td colspan="2" align="center">用户注册</td> </tr> <tr> <td>用户名:</td> <td><input type="text" value="填写用户名"></td> </tr> <tr> <td>密码:</td> <td><input type="password"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit"> <input type="reset"></td> <br> </tr> </form> </table> <form action="" name="" method=""> <br> <input type="text" value="请输入..." name="" size="9" maxlength="7"> <br> <br> <input type="password"> <br> <input type="submit" value="注册"> <input type="reset"> <input type="button" value="换肤"> </form>
原文地址:https://www.cnblogs.com/peizilu/p/11369654.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 盘点 6 个被淘汰的 Java 技术,它们都曾经风光过!
- Unlock a VBA password protected Excel file By HKL,
- kde安装gtk主题(kde-gtk-theme)KDE4下gtk程序美化 By HKL,
- Monkey's Audio vs. WavPack vs. FLAC By HKL,
- 彻底屏蔽优酷广告 By HKL, Monday 12 Au
- C# 如何给Winform的button等控件添加快捷键 By HKL,
- kmskeys10 By HKL, Saturday 7
- C# Random 生成不重复随机数 By HKL, We
- Resin4配置 By HKL, Thursday 11
- 从源码编译N(ginx)+M(ySQL)+P(HP)并安装WordPress By HKL,
- MPEG4视频中,I帧、p帧、B帧的判定(转载) By HKL,
- 使用attrib命令解决存储器中毒后文件夹被隐藏的方法 By HKL,
- 在Archlinux上通过qemu运行ReactOS By HKL,
- Archlinux下解决wireshark普通用户抓包权限问题 By HKL,
- 使用jemalloc对nginx进行优化 By HKL,