HTML基础结构

最新推荐文章于 2022-08-05 20:54:02 发布
最新推荐文章于 2022-08-05 20:54:02 发布
阅读量240 收藏
点赞数
分类专栏： hmtl
  • 不成对出现的标签
<br> <hr> <meta> <img> <input..> <option..> <link>


  • HTML 基本标签的讲解：
  • <strong>用于强调文本，强度更深，表示重要文本--->用于SEO优化
  • <b>只是视觉加粗效果--->单纯为了产生加粗
  • <html> <head> <body>标签
  • <h1>----<h6> 仅仅用于标题文本，不要为了产生粗体文本使用它们
  • <p>标签 段落标签
  • <strong><b>标签
  • 都会让文字产生加粗效果
  • <em> <i>标签
    • em用于强调文本
    • i只是视觉斜体效果
    • <strong>比<em>强调更强
  • 特殊符号：
    •   ---->空格
    • > --->大于号
    • <；--->小于号
    • "；--->引号
    • ©-->版权号



html基本标签
  • HTMl基本标签：
  • 可以创建一个内容滚动效果
  • 锚点也是一种超链接，是页面内进行跳转的超链接
  • 第一步：创建锚点 <a name="锚点名称"></a>
  • 第二步：使用创建好的锚点名称 <a href="#锚点名称">内容</a>
  • target属性：
  • _self(在原来页面打开)
  • _blank（新窗口打开）
  • _top（打开时忽略所有的框架）
  • _parent（在父窗口中打开）
  • 文字的格式按源码的排版来显示，我们称之为预处理格式
  • 对被用来组合文档中的行内元素
  • 注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化
  • span标签
  • <pre>标签
  • <a>标签--->他有一个必不可少的属性 href
  • 创建锚点和锚链接
  • marquee标签
<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>
  • direction 表示滚动方向，取值有（left,right,up,down,默认left）
  • loop 表示滚动循环的次数，默认为无限循环
οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滚动速度)
  • 表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动






三种列表的讲解
  • 三种列表的知识讲解：
  • 无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识
  • <ul>无序列表
<ul>
   <li></li>
   <li></li>
   <li></li></ul>
  • <ol>有序列表
  • 有序列表也是一列项目，只是列表项目使用的是数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
   <li>内容一</li>
   <li>内容二</li>
   <li>内容三</li></ol>
  • 列表符号
  • type="A" A B C D
  • type="a" a b c d
  • type="1" 1 2 3 4 默认值type="I" I II III type="i" i ii iii
  • type="circle" 空心圆 type=“disc” 实心圆 默认值 type="square" 方块符
  • 无序列表-列表符号:
  • 有序列表-列表符号
  • 列表嵌套
  • 无序列表-嵌套
<ul>
 <li>柚子  <ul>
   <li>沙田柚</li>
   <li>蜜柚</li>
  </ul>
 </li>
 <li>荔枝</li>
 <li>苹果</li></ul>
  • 有序列表-嵌套
<ol>
 <li>茶  <ul>
   <li>红茶</li>
   <li>绿茶</li>
  </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>
  • 定义列表
  • 定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以 <dl> 标签开始。每个定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>  
     <dt>pc网页制作</dt>  
     <dd>学习DIV+CSS JS JQ 项目实战</dd>  
     <dt>手机网页制作</dt>  
     <dd>手机网页制作实战</dd></dl>
  • dd是对dt的解释
  • < dl>< /dl>用来创建一个普通的列表,
  • < dt>< /dt>用来创建列表中的上层项目，
  • < dd>< /dd>用来创建列表中最下层项目，
  • < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。
<dl>
    <dt>中国城市</dt>
    <dd>北京 </dd>
    <dd>上海 </dd>
    <dd>广州 </dd>
    <dt>美国城市</dt>
    <dd>华盛顿 </dd>
    <dd>芝加哥 </dd>
    <dd>纽约 </dd></dl>
  • dl是definition list的缩写
  • dt是definition title的缩写
  • dd是definition description的缩写
  • list-style属性具有三个属性分量：
  • list-style-position ：设置列表项图标的位置，位于文本内或者文本外
  • list-style-type： 设置列表项图标的类型
  • list-style-image ：使用图像设置列表项图标


HTML  form表单里的标签

  • <input>标签的掌握
  • <input type="" name="" value="" />
  • type="text" 单行文本输入框
  • type="password" 密码（maxlength=""）
  • type="radio" 单项选择（checked="checked"）
  • type="checkbox" 多项选择
  • type="button" 按钮
  • type="submit" 提交 type="image" 图片提交
  • type="file" 上传文件
  • type="reset" 重置
  • type="hidden" 隐藏


表单和表格标签：
  • <textarea>文本域标签
  • <textarea>标签：
  • <textarea></textarea>是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols
  • 注意：
  • rows表示这个文本域有多少行
  • cols表示这个文本域有多少列
  • 除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）
  • <select>标签的掌握
  • 注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性
<form>      
    <select name=""  id="">
         <option value="1">1月</option>  
          <option value="2">2月</option>      </select></form>
  • 常用到的属性：disabled=“disabled” name="sel" size="2"
  • <table>表格标签
  • <table>表格标签：<table>是表格标签，可以用它定义一个表格。
<table border="1">
    <tr>
    <td>姓名</td>
    <td>性别</td>
    </tr></table>
  • 注意：<table>的border属性不能少
  • <tr> <td>标签的使用
  • <tr>可以定义表格中的一行，一个<tr></tr>表示一行。
  • <tr>行标签：
<table border="1"><tr>
 <td>姓名</td>
 <td>性别</td></tr><tr>
 <td>姓名</td>
 <td>性别</td></tr></table>
  • <td>单元格标签:
  • <td>可以定义表格中的一个单元格，<td></td>表示一个单元格。
<table border="1"><tr><td >姓名</td><td>性别</td><td>爱好</td></tr></table>
  • border-collapse 属性设置是否将表格边框折叠为单一边框：
  • border-collapse:collapse;
  • colspan左右合并
  • rowspan上下合并





  • 非可视化标签：head meta style scrpit...
  • 可视化标签：img div span a ul li...
  • 只有可视化标签，才能用css改变它
  • 单标签：meta link base img input br hr
  • 双标签：html head body div a p span ..ul li ol dl ....
一梦醉殇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML概述
年轻人————001
10-15 375
一，html概述 HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览...
3.1 HTML基本结构
mmsx2017的博客
01-20 847
一、HTML基本结构 1、文档声明：声明这是一个HTML文档 2、标签：是设计者在告诉浏览器，整个网页是从这里开始的，到结束 3、标签：只能定义一些特殊的内容 4、标签：一般网页绝大多数的标签代码都是在这里编写的 二、用记事本编写网页 1、第一步：新建“记事本”，把下面这段代码复制到记事本中去，然后保存，将记事本名字改为“我的第一个网页”。 2、第二步：将记事本后缀名“.tx
HTML--HTML基础结构
qq_27150223的博客
02-03 119
HTML基础结构 HTML初识 HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。 HTML骨架格式 日常生活的书信，我们要遵循共同的约定。 同理：HTML 有自己的语言语法骨架格式： html <HTML> <head> ...
html基本结构
Csdn_Idyf27的博客
06-18 168
html基本结构
HTML基本结构
xiaoweids的博客
05-23 277
转自：微点阅读https://www.weidianyuedu.com 之前介绍了HTML的编码规范，良好编码规范可以让我们的代码更加的易于维护，而今天要说的基本结构，则是能够让我们的页面正确的进行页面显示和SEO，正确的HTML格式加上良好的编码规范才是一个成熟合格的项目。 HTML页面基本结构 <!DOCTYPE html><html><head><metacharset="utf-8"...
Echarts可视化中html基础结构框架
最新发布
09-06
Echarts中html结构
HTML基础 HTML的组成结构
09-28
HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。
数据结构基础讲义
09-27
树的应用广泛，如文件系统的目录结构、HTML文档的DOM表示、二叉搜索树等。 树的应用进一步扩展到二叉树和平衡树。二叉树每个节点最多有两个子节点，常见的二叉树类型有二叉查找树、完全二叉树和满二叉树。平衡树，...
html文档基本结构(制作网页基础知识)
09-28
理解HTML文档的基本结构是制作网页的基础。一个标准的HTML文档通常由以下四个主要部分组成： 1. **文档声明（DOCTYPE）**：文档声明位于HTML文档的开头，用来告诉浏览器文档遵循的HTML版本或XHTML规范。例如： ```...
HTML基础:HTML的基本结构
12-14
HTML的基本结构 　超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 <HTML> 　<HEAD>　头 部 信 息　</HEAD> 　<BODY>...
HTML的基本结构
修罗神的海岛
04-13 4416
<html>内容</html>：HTML文档是由<html></html>这是HTML文档的文档标记，也称为HTML开始标记。这对标记分别位于网页的最前端和最后端，<html>在最前端表示网页的开始，</html>在最后端表示网页的结束。 <head>内容</head>: HTML 文件头标记，也称为HTML头信息开始标记。用来包含文件的基本信息，比如网页的标题、关键字,在<head></h.
html文件基础结构
总结和收藏
10-28 144
html文件 百度百科介绍 HTML文件是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML文件的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 例： 1.html是跟标签,所有内容要写在跟标签内 2.head是头部，里边可以写css，js部分，即给浏览器识别的文件并不显示在页...
HTML入门篇01.基本结构
m0_62404129的博客
08-05 196
HTML入门篇01.基本结构
(一)html语法和基本结构
cloud-2014的专栏
07-19 1532
1.什么是HTML标记语言 表示网页信息的符号标记语言 特点 1.可以设置文本的格式，比如标题、字号、文本颜色、段落等等 2.可以创建列表 3.可以插入图像和媒体 4.可以建立表格 5.超链接，可以使用鼠标点击超链接来实现页面之间的跳转 2.HTML的标记和他的属性 标记 1.HTML文档的保存格式 .html .htm .xhtml 2.标记和被标记的内容构建出HTM
HTML5基本结构及标签
_Alexander的博客
05-22 3752
<!DOCTYPE html> <html> <head> <title>我的第一个HTML5页面</title> </head> <body> 你好，HTML5! </body> </html> HTML5HTML5基本结构DOCTYPEbasemetastylelinkscriptboby注释字符实体图像文件HTML4.01转换为H
基础html页面结构
weixin_30642561的博客
11-01 44
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="关键字" />...
HTML讲解（HTML结构及标签）
m0_48273471的博客
04-20 7116
HTML的使用及HTML常见标签 目录 1. HTML结构 1.1HTML 基本结构 1.2标签层次结构 2. HTML常见标签 2.1 注释标签 2.2 标题标签 2.3 段落标签 2.4 换⾏标签: br 2.5 格式化标签 2.6 图⽚标签: img 2.7 超链接标签: a 2.8 表格标签 2.9 列表标签 2.10 表单标签 1. HTML结构 1.1HTML 基本结构 <html> <head> ...
HTML入门教程
09-03
HTML 文档的基本结构包括以下标记： <HTML>：表示这对标记间的内容是 HTML 文档。通常，.html 或.htm 文件被 Web 浏览器默认为是 HTML 文档，因此有些地方会省略<HTML>标记。 <HEAD>：包括文档的头部信息，如文档总...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值