HTML+CSS学习笔记(一)

有些话、适合烂在心里 提交于 2019-12-17 18:19:33

一、HTML的概念

HTML:Hyper Text Markup Language 超文本标签语言

HTML:网页的“源码”

浏览器:“解释和执行”HTML源码的工具

 

二、HTML文件的基本结构

 

<html>
<head>
<title>我是标题</title>
</head>

<body>
你好,我是HTML基本结构
</body>
</html>

主要由“head头部”和“body主体”组成,网页内容(包括文本、图像、链接等)都在body内

 

三、块级标签

 

*      基本块级标签   

1、标题标签<h1>-<h6>

2、段落标签<p></p>

3、水平线标签<hr/>

*      常用于布局的块级标签

1、有序列表标签<ol></ol>

2、无序列表标签<ul></ul>

3、定义描述标签

<dl>
    <dt>标题</dt>
    <dd>描述</dd>
    ……
</dl>

4、表格<table></table>  一行<tr></tr>  一列<td></td>

<table>
    <Tr>
        <td>百度</td>
        <td>新浪</td>
        <td>天涯</td>
    </Tr>
    <Tr>
        <td>谷歌</td>
        <td>搜狐</td>
        <td>猫扑</td>
    </Tr>
</table>

以上代码的效果:

5、 表单form

一般和table使用

 

<form>
<table>
    <Tr>
        <td>用户名:</td>
        <td><input type="text" /></td>
    </Tr>
    <Tr>
        <td>密码:</td>
        <td><input type="password" /></td>
    </Tr>
    <Tr>
        <td colspan="2"><input type="button" value="提交" /></td>
    </Tr>
</table>
</form>

 

效果是:

 

          6、分区标签<div>

 

四、常用的四种块状结构

 

1div-ul(ol)-li :常用于分类导航或菜单等

2div-dl-dt-dd :常用于图文混编的场合

3table-tr-td :常用于图文布局或显示数据

4form-table-tr-td:常用于布局表单 

 

五、行级标签

 

1、图像标签   

<img  src= "图片地址"  alt="提示文字"   title="提示文字" />

2、范围标签<span> :显示某行内的独特样式       

<span >文本等行级内容</span>

3、换行标签 <br/>  (注意<br/>和<hr/>2个标签的特殊)

 

六、W3C标准

      1、为什么要使用W3C标准

      W3C:World Wide Web Consortlum,万维网联盟

      W3C的职能:负责制定和维护web行业标准

      W3C标准包括:列的标准

      a.HTML内容方面:XHTML

      b.样式美化方面:CSS

      c.结构文档访问方面:DOM

      d.页面交互方面:ECMAScript

 

      2、XHTML1.0的基本规范

      a.标签名和属性名称必须小写

      b.HTML标签必须关闭

      c.属性值必须用引号括起来

      d.标签必须正确嵌套

      c.必须添加文档类型声明

 

七、关于HTML语义化的理解

      

          HTML代码语义化,搜索引擎的爬虫在搜索页面时只识别含有语义化的标签,如<h1>标题<p>段落等,而不识别表示样式的标签,如<font>字体、<b>加粗等

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!