博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
五月四日 HTML基础,通用标签
阅读量:4687 次
发布时间:2019-06-09

本文共 2998 字,大约阅读时间需要 9 分钟。

HTML即超文本标记语言(Hyper Text Mark Language),是用于创建网页的标准标记语言,分静态页面(html)和动态页面(.php .asxp .jsp,分别由PHP,.NET,JAVA创建)。目前已经有HTML5,而比较常用的是HTML4。

常用的IDE(代码编辑器)有Visual Studio(全面),HBuilder(主要用于前端开发),Dreamweaver(比较古老,适合新手),Webstorm(号称最好用的写前端)。

一、HTML的基础语法:

(1)标签:html最小单位,就是标签,分双标签和单标签。双标签一般用来标记某些内容,格式为<标签名 属性1="属性值1" 属性2="属性值2">内容</属性名>。单标签一般起控制作用,格式为<标签名 属性1="属性值1" 属性2="属性值2" />

(2)结构:<!DOCTYPE html>  文本类型:html

 <html>开始结束标记

  <head>

    <mate charset="utf-8">编码格式,常用的有三种utf-8(世界通用),GB2312(国家标准),GBK(GB2312扩容)。

    <title>标题</title>

  </head>标签页标题 

  <body>主体内容</body>

 </html>

(3)调试。网页可以直接在浏览器中显示的内容上右键点检查(谷歌浏览器)定位代码并修改。

 二、通用标签:

(1)body的属性:

  <body bgcolor="背景颜色"  text="文本颜色" margin="页边距">

    <img src="图片路径" width="宽度" height="高度">图片标签  路径分相对路径(以当前文件为基点算起),绝对路径(以当前计算机根目录为基点算起,不要用)。相对路径表示方法:../文件名:上一级目录; ./(也可以不写)文件名: 当前目录; 文件夹名/文件名:下级目录;/文件夹/文件名:根目录

    <a href="网址/本地目录的网页" target="_blank">超链接</a>  target常用属性值有两个,_blank是在新的空白标签页中打开,_self是在当前标签页中打开。超链接也可以做成锚点和下载地址。

  </body>通常很少直接在body里加属性。

(2)格式控制类标签

  <font size="大小" face="字体" color="颜色">文本</font>  font在html4中已经不被赞成使用,在编写过程在通常采用样式代替。

  <b>加粗</b><strong>加粗</strong> 效果一致

  <i></i>倾斜<em>倾斜</em>效果一致

  <u>下划线</u>                       加粗倾斜下划线标签使用较少,用样式表代替。

  <h1>一级标题</h1>    每一级标题

  <h2>二级标题</h2>    相对上一级    标题单独占一行

  <h3>三级标题</h3>    字体会变小

  <p>段落</p>  单独占一行  段落之间会空一行

  <span>层标签</span> 单独使用无效果,可以用来单独标记某些文字,让文字呈现不同的效果。

  <div>层标签</div>配合样式表使用,代替table布局。单独占一行

扩展内容:

  <del>这不是重点,删掉</del> <sup>右上角标</sup>  <sub>右下角标</sub> <mark>这才是重点,标记一下</mark>

(3)表格标签

  <table border="表格边框线粗细" width="表格宽度" height="表格高度" bgcolor="表格背景色">背景色通常用颜色代码表示 例如#0000FF是蓝色

    <tr height="行高">行一   不同行的高度可以不同

      <td width="列宽" rowspn="跨行,跨一行后会覆盖行二的列一">列一</td>   同一列的宽度一样 不允许错位

      <td colsapn="跨列,跨一列后会覆盖列三">列二</td>

      <td bgcolor="表格单元格颜色,优先级高于表格颜色">列三</td>  优先级问题会经常遇到,作为文本语言,按阅读顺序靠后的优先级高

    </tr>

    <tr>行二

      <td align="水平方向">列一</td>    水平方向分 left,center,right三种

      <td valign="垂直方向">列二</td>  垂直方向分top,middle,bottom三种

      <td>列三</td>

    </tr>

    <thead>  表头,增加代码可读性,相当于页眉。

      <td>表头</td>

      <th>标题</th> 相当于样式中的居中和加粗,更加简便。只占一个单元格

    </thead>

    <tfoot>  表脚,增加代码可读性,相当于页脚。

      <td>表脚</td>

    </tfoot>

  </table> 表格无法错位,需要错位时在表格里套表格,不常用。

三、练习内容。今天课上的练习内容。

                 
我是标题 1234567890 百度 超级链接 倾斜 倾斜

标题1

标题2

标题3

这是一段话

这又是一段话

啦啦啦嘿嘿嘿
哈哈哈
今天晚上没作业真的?骗你的哈哈哈 这里是重点
在中间
1 2
b c

 效果图:

  

 后记:

写完看了一眼时间,没想到已经晚上十一点多了,完全没感觉到时间的流逝啊,挺充实的,感觉真好。

转载于:https://www.cnblogs.com/shenyuyaqing/p/6813899.html

你可能感兴趣的文章
shp系列(一)——利用C++进行shp文件的读(打开)与写(创建)开言
查看>>
匹配两个空格之间的字符。。。
查看>>
CSS 文字溢出 变成省略号 ...
查看>>
Spring事务
查看>>
java编程基础(三)流程控制语句
查看>>
让数据库跑的更快的7个MySQL优化建议
查看>>
jquery 取id模糊查询
查看>>
解决在vue中,自用mask模态框出来后,下层的元素依旧可以滑动的问题
查看>>
修改node节点名称
查看>>
PAT(B) 1014 福尔摩斯的约会(Java)
查看>>
PAT甲级题解-1123. Is It a Complete AVL Tree (30)-AVL树+满二叉树
查看>>
项目开发总结报告(GB8567——88)
查看>>
SSH加固
查看>>
端口扫描base
查看>>
iOS IM开发的一些开源、框架和教程等资料
查看>>
FansUnion:共同写博客计划终究还是“流产”了
查看>>
python 二维字典
查看>>
pip 警告!The default format will switch to columns in the future
查看>>
Arrays类学习笔记
查看>>
实验吧之【天下武功唯快不破】
查看>>