欢迎光临散文网 会员登陆 & 注册

0808-HTML和CSS(1)

2023-08-16 07:35 作者:GHWNM  | 我要投稿

HTML是由标签组成的,大多数成对出现,也有部分是单个,学名超文本标记语言

文档声明(不写会导致很多地方无法声明,不兼容以怪异模式渲染) <!DOCTYPE>

html头标签里写lang=xx是设置网页语言,zh-CN是中文,en是英文

目前流行的是html5和xhtml 1.0这两种版本,xhtml目前看来主要是文档声明贼拉长,以及H5多了些标签元素和元素属性,所以我们用的是H5

这里面注释是<!--注释内容...-->,然后就是讲html的重要标签(还有就是这个老师老是把/和\搞反,前者是正斜杠,后者(enter上面那个)是反斜杠)

<h1>,<h2>,<h3>....<h6>这些都是网页中标题的标签,h1最大,h6最小,称作一级标签,二级标签等

这个会影响SEO,搜索引擎优化(来讨好百度的爬虫程序),如果你网站优化不好,就会给你往后排,当然,排在前面有可能是花钱的(

p标签:段落标签,也是放在body标签里,你在前面空格他不会显示,中间只能空一个格,多了他不认

&nbsp;空格字符实体,一两个还行用这个,多或者精确话就用后面的样式,可以空多少个像素

>号和<号的字符实体,&gt;和&lt; 因为在html里<>成对的话会有可能被识别为代码,换行(代码里直接写没用)的字符实体是<br />,单个出现的标签

单个的最好都后面加个" /",比如<br>写<br />,以及以上这些最后都带有;

div标签,表示一块内容,没有具体的语句含义,之前的p有段落的含义,div没有,而且p标签自带换行样式,div没有自带的样式,包括换行

span标签,表示行内的一小段内容,同样没有具体的含义

div标签嵌套的比较多,比如div里嵌套个h1啊之类的,span标签目前没用,但是后面学了样式可以单独把这个里面所有的span表示都赋予样式

<em>标签,表示语气中的强调词,<i>标签,表示专业词汇,这俩都带有斜体的样式,主要面试中用

<strong>表示很重要,<b>表示关键元素,产品名什么的,这俩都是加粗,以上四个主要是面试考

<img src="文件的地址,绝对或相对都可以" alt="文件描述" />,这个文件描述,可以帮助搜索引擎和盲人的无障碍模式阅读,是一个非常伟大的功能

以及我还是习惯不省略./,最好写上,写完整看着舒服,只有保留一部分前缀别人才知道你写的是路径(

<a>标签,连接标签,href属性:链接跳转的地址,title属性:鼠标悬停时弹出的文字显示框,target属性:窗口打开的位置,=_self是替换自己原本的窗口,=blank是新窗口

taget默认是_self,也就是替换自己,a标签内容是新网站在网页上显示的名字,还能改成图片作为连接,写个img标签就可以

需要注意的是,目标位置写#可以跳转到页面顶端,一般用来表示暂时不能确定的连接

<ol>,他会自动给列表中的元素排序,前面加个1. 2. 3.等等的

正常是以</ol>结尾,但是实际中一般用</ul>结尾,这个叫无序排列,是用一个·来代替1. 2. 3.等


表格:

<table>标签,声明一个表格,常用属性如下:

    border:设置表格的边框宽度(单位是像素)。例如,border="1"表示表格边框宽度为1px。

    cellpadding:设置单元格内部的空白边距(单位是像素)。例如,cellpadding="5"表示单元格内部的空白边距为5px。

    cellspacing:设置单元格之间的间距(单位是像素)。例如,cellspacing="10"表示单元格之间的间距为10px。

    width:设置表格的宽度。可以使用具体的像素值(width="500px"),也可以使用百分比(width="50%")。

    align:设置表格相对于其容器的水平对齐方式。可以设置为"left"(左对齐)、"center"(居中对齐)或"right"(右对齐)。(h标签也有这个属性,应该其他的很多都有)

    bgcolor:设置表格的背景颜色。可以使用具体的颜色值(bgcolor="#FF0000"),也可以使用颜色名称(bgcolor="red")。

    caption:用于为表格添加标题。<caption>表格标题</caption>将在表格上方显示一个标题。

    colspan:设置单元格在水平方向上跨越的列数。例如,colspan="2"表示单元格跨越两列。

    rowspan:设置单元格在垂直方向上跨越的行数。例如,rowspan="3"表示单元格跨越三行。


<tr>标签,定义表格中的一行

<td>和<th>标签,定义一行中的一个单元格,td代表普通单元格,th表示头单元格常用属性如下(单位:像素):

    align 设置单元格中内容的水平对齐方式 left | center | right

    valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

这俩用起来一样的,设置th表头只是为了后面样式方便渲染,比如表头渲染啥的


以及其实tr里可以直接设置,就不用每行每个元素都设置了,直接tr里设置一下其他的都设置好了


这个table实际上就是布局(传统布局),但是不常用,主要是HTML+CSS布局

不过这个东西可以嵌套,所以确实可以做出一番效果,但是比较不理解的是这个东西咋做出具体的效果,华丽的特效之类的,直接贴图片?

好了,真是贴图片,那没事了,那就不是前端web该做的了(而且我本来也不打算做前端,只是课程刚好有,就学一下看看

然后就是<hr />,目前就理解为画一条线



0808-HTML和CSS(1)的评论 (共 条)

分享到微博请遵守国家法律