【原创】HTML学习整理内容

最新推荐文章于 2023-05-03 16:36:54 发布

ymj960722

最新推荐文章于 2023-05-03 16:36:54 发布

阅读量163

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ymj960722/article/details/106582866

版权

HTML基础

<!DOCTYPE html>：文档第一行文档类型声明不是html标签

段落

align属性： left ；right ；center ；justify

</h>分割线

修饰标签：
 斜体
  加粗
 下标
 上标

特殊符号：
< < 小于号
> > 大于号
  空格
® 已注册
© 版权
™ 商标

列表标签分类：
1.无序列表

<ul>
<li>列表</li>
 </ul>

type属性：disc圆点；square正方形；circle空心圆
2.有序列表

<ol>
<li>列表 </li>
 </ol>

type属性：1；a；A；i；I
3.定义列表

<dl>
<dt>标题</dt>
<dd>描述</dd>
 </dl>

图像标签：
语法：<img src=”” alt=””/>
img属性：
Src（必须）；alt（图像代替的文本）；height（图像高度）；width（图像宽度）
超链接：
语法：<a href=””>内容</a>
属性：href=”链接地址”（# 空连接） target=”窗口位置（_self代替本窗口 _blank另开一个窗口）”
title=”链接提示文字” name=”链接命名”
【<a href=”锚名1”> </a> <a href=”#” name=”锚名1”</a>】

HTML表格

三要素：table—表格 tr—单元格行 td—单元格列
语法：table表格 caption标题 thead表头 tbody表主体 tfoot表脚注

<table>
Caption -- 表格的标题  居中显示
<thead> -- 表头
<tr>
  <th></th> -- 表格头，内容居中显示，加粗显示
 </tr>
</thead>
<tbody> -- 表格的主体
<tr>
  <td></td> -- 表体 -- 默认靠左显示 不加粗
  </tr>
<tbody>
<tfoot> -- 脚注
<tr>
  <td></td> -- 表体 -- 默认靠左显示 不加粗
  </tr>
</tfoot>
</table>

frame外部边框设置
void不显示外框；above 显示上部；below 显示下部；hsides 显示上下部；vsides 显示左右部；lhs显示左边；rhs 显示所有四个边；border 显示四个边

rules内部边框设置
None 没有线条； groups 位于行组和列组之间的线条；rows 位于行之间的线条； cols 位于列之间的线条；all 位于行和列之间的线条

tr标签属性设置
align 行内容的水平对齐方式 left；center；right；justify；char
valign 行内容的垂直对齐方式 top；middle；bottom；baseline
bgcolor 行的背景颜色 colorname；#xxxxxx；rgb(x,x,x)
td和th属性设置
align 单元格内容水平对齐方式 left；center；right；justify；char
valign 单元格内容垂直对齐方式 top；middle；bottom；baseline
bgcolor 单元格背景颜色 colorname；#xxxxxx；rgb(x,x,x)
width 单元格宽度 px；%
height 单元格高度 px；%

thead tbody tfoot属性设置
align 单元格内容的水平对齐方式 left；center；right；justify；char
valign 单元格内容垂直对齐方式 top；middle；bottom；baseline

表格合并
colspan:列合并
Rowspan:行合并

表格嵌套

<table>
  <tr>
    <td>....</td>
  <td>
<table>
  <tr>
      <td></td>
      <td></td>
  </tr>
</table>
    </td>
</tr>
</table>

HTML表单

表单控件属性：

name 指定控件的名称，可重复——给后台获取数据使用
id 指定标签的唯一识别（类似身份证）
value 输入的控件的值（收集，设置）——用于传递到后台使用
checked 复选框（单选）默认被选中的项目
selected 列表框默认被选中的项目
src 图片框的图片来源
onclick 鼠标的单击事件——JavaScript脚本的事件
disabled 禁用该控件
multiple 允许多选（适用于普通列表框）

method 提交方式

post 隐式提交对安全信息保护比较好
get 显示提交对信息保护不是特别好会将数据显示在url地址上

按钮解析
语法：<input type=”botton” value”” name=””>
button 普通按钮； submit 提交按钮； reset 重置按钮

普通列表框
语法：<select size=””>

分组下拉菜单-optgroup

<select name="city">
  <option>-请选择-</option>
  <optgroup label="华北">
    <option value="bj">北京</option>
    <option value="tj">天津</option>
    <option value="hb">河北</option>
  </optgroup>
   <optgroup label="华东">
    <option value="sh">上海</option>
    <option value="fj">福建</option>
    <option value="xm">厦门</option>
  </optgroup>
</select>

标签补充
div标签
区块容器标签，可以包含段落、表格、图片等各种html元素

span标签
没有实际意义，为了应用样式，通常放纯文本

块级标签
占据一行 div ;ul ; li ; dl ; h1~h6 ; form ; hr ; br …

行级标签
在一行，不换行 b ; em ; img ; input ; a ; sup ; sub ; textarea ; span…

标签嵌套规则
1.行元素不能包含块级元素，只能包含其他行内元素（行只能包含行）
2.块级标签可以包含行级标签（行内元素）和某些块级元素（块级标签除了）
3.块级元素不能放在 （不能包含段落标签内）
4.特殊的块级元素只能包含行内元素，不能包含块级元素（如：<h1~h6>; ;<dt>）
5.块级元素和块级元素并列，行级元素和行级元素并列（块与块，行与行）
虽然html语法检测不出问题，但要遵守标签嵌套规则

ymj960722

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【原创】HTML学习整理内容

HTML基础<!DOCTYPE html>：文档第一行文档类型声明不是html标签段落align属性： left ；right ；center ；justify</h>分割线修饰标签： 斜体 加粗 下标 上标特殊符号：&lt
复制链接

扫一扫