html学习笔记

最新推荐文章于 2024-07-06 09:55:36 发布

potatobeancox55555

最新推荐文章于 2024-07-06 09:55:36 发布

阅读量159

点赞数

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

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html概述

html定义

HTML：Hyper Text Markup Language 超文本标记语言
通过一组标签对内容进行描述的一门语言。

HTML的语法和规范

HTML文件的扩展名是.html或者是.htm
HTML文件是由头和体组成
HTML这组标签是不区分大小写
HTML的标记通常是由开始标签和结束标签组成：

<b>内容</b>  
<br/>

html规范

最好将所有的内容放在一个标签中
有开始标签和结束标签的标签称之为围堵标签
没有结束的标签的称之为空标签

开始标签和结束标签之间的内容称之为标签体.

<!--注释内容--> html页面中的注释

标签必须正常嵌套,
标签最好关闭

HTML标签

HTML的字体标签

字体标签

<font 属性名=”属性值”>文字</font>
属性名：
size:控制字体大小.最小1 最大7
color：控制字体颜色. 使用英文设置 ，使用16进制数设置
face：控制字体.

HTML的排版标签

标题标签

<h1>b标题</h1>
h1~h6
h1最大  h6最小
自动换行且留白，默认加粗
常用属性:
    align:对齐方式
        left:左  right:右 center:居中

段落标签

<p>一段文字</p>

换行标签

<br/>

水平线标签

<hr/>

字体加粗标签

<b>文字</b>

斜体标签

<i>斜体</i>

HTML列表标签

无序列表

<ul>
    <li>内容1</li>
    <li>内容2</li>
</ul>

有序列表

<ol>
    <li>内容1</li>
    <li>内容2</li>
</ol>

HTML超链接标签

<a>超链接</a>
属性名称：
href：超链接跳转的路径
target：打开方式
    _self：在自身页面打开
    _blank：打开一个新窗口

HTML的表格标签

常用表格

<table>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>
table的属性：
    border  ：表格边框
    width   ：表格宽度
    height  ：表格高度
    align   ：水平方向对齐方式 left center right
    bgcolor ：背景色
tr 行
td 单元格
属性
    align:内容对齐
    colspan:跨列合并 值:合并的列数
    rowspan:跨行合并
th :表头单元格 默认居中加粗

带有 thead、tbody 以及 tfoot 元素的 HTML 表格：

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
    tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
    thead 元素用于对 HTML 表格中的表头内容进行分组，
    而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。
    它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。
    您必须在 table 元素内部使用这些标签。

HTML的表单标签

表单

需要提交的表单需要使用
<form></form>
括起来
form标签属性：
    action：提交路径
    method：提交方式
        GET：默认值
        提交的数据都会在地址栏中进行显示
        提交的数据的时候是有大小的限制
        POST：
        提交的数据不会再地址栏中进行显示
        提交的数据没有大小限制

文本框:

<input type=”text”/>
属性：
name
value
size
maxlength
readonly

密码框：

<input type=”password”/>

单选按钮：

<input type=”radio”/>
属性：
    checked：默认选中

复选框：

<input type=”checkbox”/>
checked：默认选中

下拉列表框：

<select>
    <option></option>
</select>
属性值：
    selected：默认选中
    multiple：全部显示

文件上传项：

<input type=”file” name=”file”/>

文本区：

<textarea name=”” cols=”” rows=””></textarea>

提交按钮：

<input type=”submit” value=”注册”>

重置按钮：

<input type=”reset” value=”重置”>

普通按钮：

<input type=”button” value=”普通按钮”>

隐藏字段：

<input type=”hidden” name=”id”/>

表单提交规则

提交到服务器的内容的格式:
key=value&
对于文本框密码框文本域手写的内容传递过去了
对于单选框和多选框来说,却没有把值传递过去
要想把值传递过去必须设置value属性
若下拉选要想把选中内容的值传递过去,请加上value属性
默认值:
文本框密码框:只需要添加value属性
单选框多选框:添加 checked=”checked”
下拉选:添加selected=”selected”
文本域:标签体

HTML的框架标记

<frameset>
</frameset>
使用了frameset标签，不需要使用body.
属性：
    rows：横向切分页面
    cols：纵向切分页面
<frame>标签代表切分每个部分的页面
属性： 
    src：引入页面的路径
实例：
<frameset rows="15%,*">
    <frame src="top.html" />
    <frameset cols="15%,*">
        <frame src="left.html" />
        <frame src="right.html" />
    </frameset>
</frameset>

HTML引入资源标签

引入css标签

<link rel="stylesheet" href="css/style.css" type="text/css" />
href：css文件的路径

引入js标签

<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>

引入图片标签

<img src="img/header.png" />
常用属性:
    src:图片的路径
    alt:替代文字
    title:移上去显示的文字
    width:宽
    height:高
大小的写法:
    像素:123px
    百分比:20%
路径的写法:
    相对路径:
        ./ 或者 什么都不写  当前目录
        ../  上一级目录
    绝对路径:
        带协议的绝对路径:
        http://www.potato.com

HTML其他标签

按钮标签

<button type="button">Click Me!</button>
引入一个按钮

label标签

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
<label> 标签为 input 元素定义标注（标记）。

strong标签

表示强调语气，尽量少用

转义字符:

三部分构成 &实体;
掌握的转义字符:

>   &gt;  //great then
<   &lt;
&   &amp;
空格 &nbsp;

meta标签

元信息

<meta charset="UTF-8">指定浏览器用什么编码打开此页面

HTML文件标签

html标签:

声明当前网页为html页面
子标签:

<head></head>
<body></body>

head:

用来存放当前页面的重要信息,一般不展示在html页面上
常见的子标签:

<title></title> 网页的标题

body:

要展示的数据放在body中

potatobeancox55555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html学习笔记

html概述html定义HTML：Hyper Text Markup Language 超文本标记语言通过一组标签对内容进行描述的一门语言。HTML的语法和规范HTML文件的扩展名是.html或者是.htm HTML文件是由头和体组成 HTML这组标签是不区分大小写 HTML的标记通常是由开始标签和结束标签组成：&lt;b&gt;内容&lt;/b&gt; ...
复制链接

扫一扫