html

最新推荐文章于 2024-02-16 23:45:17 发布

Pesally

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量382

点赞数

文章标签： html css 浏览器

html与CSS的关系

HTML是网页内容的载体
CSS样式是表现
JavaScript实现特殊效果

html文件基本结构

<html>
    <head>...</head>
    <body>...</head>
</html>

<html></html>称为根标签，包含所有网页标签
<head>用于定义文档的头部，是所有头部元素的容器。头部元素有<title></title>、<script></script>、<style></style>、<link>、<meta>等
在<body>和</body>中的是网站的主要内容，如<h1>、<p>、<a>、<img>，这些标签的内容会在浏览器中显示出来

认识head标签

文件的头部描述了文档的各种信息。绝大多数头部数据不会作为内容显示给读者
<title>标签中的内容会出现在浏览器的标题栏中，便于搜索引擎判断主题

html注释

一些标签的使用

段落

<p>是段落标签

标题

<hx>文章标题，共有6个h1、h2、h3、h4、h5、h6，根据重要性递减

强调

<strong>——粗体
<em>——斜体

span

用于设置单独的样式

引用

q

<q>引用文本</q>
要引用的文本无需""，对简短文本的引用

blockquote

<blockquote>引用文本</blockquote>，对长文本的引用
浏览器对此标签的解析是缩进样式

换行

<br />换行
没有HTML内容的标签为空标签，空标签只需一个开始标签。
HTML中忽略回车和空格

空格

 空格

水平线

<hr />增加一条水平线

地址信息

<address>联系地址信息</address>，在浏览器上样式为斜体

代码

一行代码

<code>代码</code>

多行代码

<pre>代码</pre>，pre中的元素通常会保留空格和换行

列表

无序

ul-li是没有顺序的信息列表

<ul>
    <li>信息</li>
    <li>信息</li>
    ......
</ul>

有序

ol-li有顺序的信息列表

<ol>
    <li></li>
    <li></li>
</ol>

div

独立逻辑部分，相当于一个容器。
可以为独立的逻辑部分设置一个名称，用id属性为<div>提供唯一的名称

表格

创建表格的四要素

<table>、<tbody>、<tr>、<th>、<td>
1. 表格以<table>开始，以</table>结束
2. 若不加<thead>、<tbody>、<tfooter>，表格加载完后才显示，<tbody>包含行的内容下载完优先显示，如果表格很长，可用<tbody>分段，可以一部分一部分显示
3. <tr>...</tr>表格的一行，几对tr就有几行。
4. <td>...</td>一个单元格，一行中几对td说明一行就有几列。
5. <th>表头
6. 表格的列数取决于一行中数据单元格的个数

标题和摘要

摘要

摘要的内容并不在浏览器中显示，作用是增强可读性。

<table summary="摘要">

标题

<table>
    <caption>标题</caption>
    <tr>
        <td>...</td>
        ......
    </tr>
    ......
</table>

超链接

一般网址

<a href="目标网址" title="鼠标滑过显示的文本">链接文本</a>

若要在新窗口打开链接，则
<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接文本</a>

Email地址

这里写图片描述
如下

<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&bcc=xiaoyu@imooc.com&subject=主题&body=内容">发送</a>

图片

<img src="图片地址" alt="下载失败的替换文本" title="提示文本">
title提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)
图像可以是GIF，PNG，JPEG格式的图像文件。

表单

<form method="传送方式" action="服务器文件">

<form>成对出现
action：浏览者输入的数据被传送到的地方，如一个php界面(save.php)
method:数据传送的方式
所有的表单控件必须放到<form></form>之间

<form method="post" action="save.php">
    <label for="username">用户名：</label>
    <input type="text" name="username" />
    <label for="pass">密码：</label>
    <input type="password" name="pass" />
</form>

输入框

<form>
    <input type="text/password" name="名称" value="文本" />
</form>

type:
当type为text时，为文本输入框
当type为password时，为密码输入框
name：为文本框命名，以备后台程序ASP、PHP使用。
value：文本框默认值

文本域

用户需要输入大段文字时，需要文本域<textarea>.

<textarea rows="行数" cols="列数">文本</textarea>

cols:列数，rows列数
在<textarea></textarea>之间可以输入默认值

<form method="post" action="save.php">
    <label>联系我们</label>
    <textarea cols="50" rows="10">在这里输入内容...</textarea>
</form>

选框

<input type="radio/checkbox" value="值" name="名称" checked="checked" />

type：
type="radio"——单选框
type="checkbox"——复选框
value：提交到服务器的值
name：命名控件
checked:当为"checked"时，默认选中
同一组的单选按钮，name取值要一致

下拉列表框

单选

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected="selected">c</option>
    ......
</select>

多选

在<select>中设置multiple="multiple"可实现多选，Windows下多选时按下Ctrl+单击可选择多个选项

<form>
    <select multiple="multiple">
        <option value="a">a</option>
        <option value="b">b</option>
        ......
    </select>
</form>

按钮

提交

<input type="submit" value="提交" />

type：只有当type设为submit时，按钮才有提交作用
value：按钮上显示的文字

重置

<input type="reset" value="重置" />

label

当用户点击label标签时，浏览器自动将焦点转到和标签相关的表单控件上。

<label for="控件的id名称">文本</label>

<form>
    <label for="male">男</label>
    <input type="radio" name="gender" id="male" />
    <br />
    <label for="female">女</label>
    <input type="radio name="gender" id="female" />
    <label for="email">输入你的邮箱地址</label>
    <input type="email" id="email" placeholder="Enter email" />
</form>

Pesally

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html

html与CSS的关系标签html文件基本结构认识head标签html注释一些标签的使用段落标题强调span引用qblockquote换行空格水平线地址信息代码一行代码多行代码列表无序有序div表格创建表格的四要素标题和摘要摘要标题超链接一般网址Email地址图片表单输入框文本域选框下拉列表框单选
复制链接

扫一扫