html 基础

来源：互联网发布：mac放置文件编辑：程序博客网时间：2024/06/06 01:50

首先html 和 css 以及 javascript 的关系，html 定义了页面的具体内容，而css 则描述它的外观， javascript可以实现页面元素的一些行为，从而使整个页面“活”起来，

html : 内容

css ：外观样式

javascript ：行为

也就是说html 相当于提供了一个整体的骨架，而因为css 的存在使得 html 有了特别的外观，而javascript 使得html 有了自己的一些特定的行为，而且通常来讲，这三部分在编码的过程中分开编写，存储在不同的地方。

常用的标签：

meta----设置页面的编码，通常是 utf-8，如: <meta charset="utf-8" />

h#, h1, 2, 3, 4, 5, 6 ---- 标题标签，且越来越小。 <h1>....</h1>

<p>..</p> 段落标签，即就是将标签之间的部分作为一个段落。

<br /> 换行标签，注意和<p> 之间的区别在于他们的行间距是不同的， <br /> 只是简单得换行，行间距很小，而<p>...</p> 行间距大一些

特殊符号：

< : <

>: >

空格：  

版权符号： ©

双引号： "

<pre>..</pre> : 可以将 <pre> </pre> 之间的部分按照代码中的原样在页面中输出来。

<img src =" "/> : 显示图片标签

<hr /> : 显示水平线标签

有序列表：

<ol type="1">    <li>项目一</li>    <li>项目二</li>    <li>项目三</li></ol>

无序列表：

<ul>    <li>项目一</li>    <li>项目二</li>    <li>项目三</li></ul>

超链接：

用法一： <a href="....."> .... </a>

用法二：跳转到本页面的某个地方，首先在要跳转到达的地方建立一个标签： <a name="top"></a>

建立连接如 <a href="#top"> 回到顶部 </a>

用法三：邮件连接， <a href="mailto: xxxxx@xxxxx"> 发送邮件 </a>

表格 table，以前可以用表格来进行页面布局，但是现在通常用div+css进行页面布局

<table border="1">    <tr><th>姓名</th><th>年龄</th></tr>    <tr><td>张三</td><td>18</td></tr>    <tr><td>李四</td><td>26</td></tr></table>

表单：向服务器端提交数据。

常见的表单元素:

<body>    <form>        <p>用户名: <input type="text" id="username" name="username" value="admin"/></p>        <p>密 码：<input type="password" id="password" name="password"/></p>        <!--单选框， 注意此处female 和 male 互斥， 所以需要保证他俩的name 相同从而实现单选-->        <!--checked 属性是为了当进入该页面的时候默认就选择的时 female-->        <!--label 标签是为了当当用户点击female或者male的时候也能够选中单选的选项-->        <p>性别：<input type="radio" id="female" name="gender" checked /><label for="female">female</label>                <input type="radio" id="male", name="gender" /><label for="male">male</label>        </p>        <!--复选框-->        <!--lable 标签和 checked 属性同单选框-->        <p>        爱好：<input type="checkbox" id="option1" checked /><label for="option1">swim</label>             <input type="checkbox" id="option2" /><label for="option2">dance</label>             <input type="checkbox" id="option3" /><label for="option3">run</label>        </p>        <!--提交按钮-->        <!--value 的值就是按钮上边显示出来的文字-->        <!--如果不把上述的表单放在form标签下边那么此处的button和submit没有区别，点击不会提交数据        而当放在from标签下边的时候点击submit，表单的值就会被传到服务器， 这个可以cong        URL链接中看到-->        <p><input type="button" id="submit", name="submit", value="提交"></p>        <p><input type="submit" id="ok", name="done", value="submit"></p>        <!--reset, 即回到刚进入页面时的编辑状态-->        <p><input type="reset", id="reset", name="reset", value="reset"></p>        <!--下拉列表-->        省份：<select>        <option selected="selected" value="https://www.baidu.com">上海</option>        <option>陕西</option>        <option>天津</option>        </select>    </form></body>

多行文本框：

建立了一个5行10 列的多行文本框，通常情况下这个也应该是出于form表单之中的。

iframe 可以用来在一个网页中显示别的网页信息，假设我们有网页 index.html, 那么我们可以新建一个页面通过 iframe来显示 index.html，如下：

<!DOCTYPE html><html xmlns="http://www.3c.org/1999/xhtml"><head><meta charset="utf-8" /><title>test</title></head><body><iframe src="index.html"></iframe></body></html>

或者建立一个链接，当点击链接的时候在页面的另外的窗口中显示index.html：

<!DOCTYPE html><html xmlns="http://www.3c.org/1999/xhtml"><head><meta charset="utf-8" /><title>test</title></head><body>    <!--target 的取值： "frame1" 表示在frame1的窗口中显示,    "_blank" 表示打开一个新的页面来显示，    “_self” 在自己本身的窗口中打开，    “_top” 在顶层窗口显示    “_parent” 在父窗口中显示 --><a href="1.html" target="frame1">index</a><iframe name="frame1"></iframe><iframe src="index.html"></iframe></body></html>

html <div>...</div>标签：

<div>标签可以把文档（页面）分割为独立的不同的部分，如果用id或者class 来标记<div> 那么这个标签的作用会变得更加有效，<div> 是一个块级元素，可以通过<div> 的class 或者 id 应用额外的样式。可以对同一个<div>元素应用class 或者id属性，但是通常只是使用其中的一种，这两者的主要差异是 class 用于元素组，而id用于标示单独唯一的元素。

如果使用了id 或者class，那么在css 中就应该使用id 选择器（#id_name { }）或者类选择器（.class_name{ }）

0 0