Web前端—HTML学习笔记
HTML
前端
发布日期:   2020-03-05
阅读次数:  

HTML简介

  • Web上的通用标记语言
  • 书写Web文档的一套语法规范
  • 用HTML语言写成的文件称为网页或页面
  • 是一种解释型语言
  • 由Web浏览器解释执行

HTML5文档结构

<!DOCTYPE html>   <!--文档类型声明，HTML5强制使用，必须在首行-->
<html lang="en">  
<head>              <!--头元素-->
    <meta charset="UTF-8"> <!--其他头内元素-->
    <title>Title</title> <!--页面标题-->
</head>
<body>   <!--体元素-->
            <!--页面主要内容区域-->
</body>
</html>

标签解析

根元素: < html > < /html > 定义了文档的开始和结束

体元素：< body > < /body > 定义了文档的主体，包含了文档的所有内容

头元素： < head > < /head > 定义了文档的头部，描述了文档的各种属性和信息，内容可以是脚本、样式表和提供的元素信息等。

< title >< /title >必须存在且包含在头元素中。

IIS简介

  • 互联网信息服务
  • 由微软公司提供的基于运行Microsoft Windows的互联网基本服务
  • 是一种Web（网页）服务组件，包括
    • Web服务器–网页浏览
    • FTP服务器–文件传输
    • NNTP服务器–新闻服务
    • SMTP服务器–邮件发送
  • 配置网站成功后即可在本地进行管理

HTML常用属性标签

常用全局属性

meta标签属性

HTML标签解析

列表标签

//普通列表
< ol >: 有序列表
< ul >: 无序列表
< li >: 列表项
// 解释型列表
< dl >: 定义列表
< dt >: 定义列表项
< dd >: 定义列表项描述
代码示例：

展示效果：

    我的早餐清单：
  • 茶的种类
    • 红茶
    • 绿茶
  • 牛奶
  • 面包
我最喜欢做的事情：
  1. 看书
  2. 旅游
  3. 游戏
最不喜欢的事情：
  1. 做作业
  2. 背英语单词
  3. 考试

链接标签

< a >: (anchor)

链接目标可以是：另一个网页，同一个网页的不同位置，图片，邮件地址，文件，应用程序。

< a >标签的属性：

  • href: 值为目标url
  • target：值有：
    • _blank:在新窗口打开
    • _self: 在本窗口打开
    • _top：在顶部窗口打开
    • 帧名：在指定框架（帧）中打开
  • id： 在网页内部创建一个书签，Id值区分大小写

id的使用：网页中的某个位置使用< a id=”PageTop”>< /a >
另一个位置< a href=”#PageTop”>返回顶部
此时点击这个链接将会返回id标签的位置。

页面结构标签

页面结构主要分为三个部分。header页面头部部分，中 页面主要内容区域，footer页面底部区域。< div >标签用来区分块。

常用字符实体

基础格式标签

表格标签


演示效果：

< table >:

table标签中的值有：

  • border：设置表格的边框线宽度
  • cellpadding：单元格内容与边框的距离
  • cellspacing：单元格之间的距离
    table内部标签：
  • < tr >: 行
  • < td >: 列（表数据）
    • colspan：合并列（td中的值）
    • rowspan：行并列
  • < th >: 表头（默认为加粗的表头）
  • < caption >: 定义表格标题，必须紧跟table标签之后。

表单标签

form标签：前后台信息交互的图形界面，允许用户输入的区域，页面上的表单的里面的信息会被提交到后台处理。
form属性值：

  • method：提交表单的方式
    • get （明文传递）
    • post（密文传递，更安全）
  • action：后台处理程序的路径，前台提交的表单交给该标签的url处理。

form内部标签：

input表单输入标签
用户名 <input type="text" id="1" name="1" minlength="6" maxlength="10" 
/ placeholder="请输入用户名"></br>

input中type值：

tab快速生成代码

① !/html：5 +< tab >:快速生成html基础结构
②标记名.class值+tab键： 生成<标记名 class=”class值”>
③标记名#ID值+tab： 生成<标记名 id=”id值”>
④标签名{内容}+tab
⑤标签名[属性名=“属性值”]:输入标签内容及属性
⑥>:子元素符号表示嵌套
示例：Table>tr*2>td*3
tab键生成：

<Table>
   <tr>
     <td></td>
     <td></td>
     <td></td>
   </tr>
     <tr>
     <td></td>
     <td></td>
     <td></td>
   </tr>
 </Table>

示例（有数字递增）：ul>li.item$*3
tab生成：

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

+：同级标签符号
示例：H1+h2
tab键生成：

 <h1></h1>
 <h2></h2>

^:该符号前的标签提升一行
示例：P>span^p
tab生成：

 <P><span></span></P>
 <p></p>
赏

   转载规则


《Web前端—HTML学习笔记》 由 tannl 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
并行计算——MPI(一) 并行计算——MPI(一)
并行计算相关go on~ MPI基础 MPI是一个库，而不是一门语言。 MPI是一种标准或规范的代表，而不特指某一个对它的具体实现。 MPI是一种消息传递的编程模型，并成为这种编程模型的代表和事实上的标准 MPI的六个基本接口MPI
2020-03-19 并行计算
并行计算 MPI
下一篇 
并行计算—OpenMP（一） 并行计算—OpenMP（一）
疫情还没有解除。开学不能返校，所以只能在家里上课学习。实验室的正式任务也已经开始了。寒假布置的任务是学习并行计算的相关知识，和学习Linux系统下的编程（vim），以及多线程OpenMP语言。 进入正题之前总是想要碎碎念一下。毕竟我的博
2020-03-04 并行计算
并行计算 OpenMP
  目录