Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。

2.  CSS样式是展现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3.  JavaScript是用来实现网页上的特效。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片的轮换)。可以这个理解,有动画的,有交互的一般都是用JavaScript来实现。

4.  标签之间是可以嵌套的。

Html文件的基本结构

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

1.  <html></html>称为根标签,所有的网页标签都在此下

2.  <head>标签用于定义文档的头部,它的所有头部元素的容器。头部元素有<title>、<script>、  <style>、<link>、<meta>等标签。

3.  在<body>标签里内容都是网页的主要内容.

Html的代码注释:<!--注释文字-->

标签的用途

语义化。就是明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。

语义化的好处:

l  更容易被搜索引擎收录。

l  更容易让屏幕阅读器读出网页内容。

<p>段落文本</p>段落标签

<h>标签,标题标签

强调语气标签:<em>斜体、<strong>加粗。可以css修改

使用<span>标签:

1.  <em>和<strong>强调关键字

2.  <span>标签没有语义,它的作用是为了设置单独的样式用的

<q>标签,短文本引用

注意这里用<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话

<blockquote>,长文本引用

<q>是对短文本的引用,几句话这样。

<br>标签分行显示文本,换行

语法:

xhtml1.0写法:<br />

html4.01写法:<br>

&nbsp;输入空格

<hr>添加水平横线

<address>,为网页加入地址信息

一般网页中会有一些网站的联系地址信息需要在网页中展现出来,这些就可以用此标签来展示。

<code>加入单行代码

<pre>加入多行代码

<ul><li>是没有前后顺序地列表

<ol><li>有顺序

<div>相当于一个容器

确定逻辑部分:

逻辑部分:页面上相关联的一组元素,如网页中的独立栏目板块。

举例:一个页面相当于一个衣橱,而div能分出很多格子

div的id属性:相当于身份证,唯一标识,必须唯一。

<table>表格标签

<style type="text/css">

table tr,td,th{border: 1px solid #993300;}

</style>

表格加个边框

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

<a href="目标网址" target="_blank">在新的浏览器窗口打开链接

使用mailto在网页中链接Email地址

如果mailto后面同时有多个参数的话,第一个参数必须以?开头,后面每个参数都以&分隔

<img>为网页插入图片

<img src="myimage.gif" alt="My Image" title="My Image">

src:标识图片的位置

alt:指定图像的描述性文件,当图像不可见时(下载不成功时),可以看到该属性指 定的文本

title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)

使用表单标签<form>,与用户交互>

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

action:浏览者输入的数据被传送的地方,比如一个PHP页面

method:数据传送的方式POST/GET

<form action="" method="post">

    <label for="username">用户名:</label>

    <input type="text" name="username" /><br>

    <label for="psss">密码:</label>

    <input type="text" name="pass" />

<form action="">

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

</form>

type=text,文本输入。type=password,密码框输入

name:为文本框命名,以备后台程序ASP/PHP使用

value:为文本输入框设置默认值(一般起到提示的作用)

<form action="" method="get">

    姓名:

    <input type="text" name="myName" value="请输入姓名">

    <br>

    密码:

    <input type="password" name="myPassword" value="请输入密码">

</form>

文本域,支持多行文本输入

<textarea name="" id="" cols="列数" rows="行数"></textarea>

cols:多行输入域的列数

rows:多行输入域的行数

<form action="save.php" method="post">

    <label for="">联系我们</label>

    <textarea name="" id="" cols="80" rows="10">在这里输入内容</textarea>

</form>

使用单选框、复选框,让用户选择

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

type:=radio,单选框、=checkbox,复选框

value:提交数据到服务器的值

name:为控件命名,以为后台使用

checked:当设置checked="checked"时,该选项默认选中

<form action="" method="post">

    你是否喜欢旅游?<br>

    <input type="radio" name="radiolove" value="喜欢" checked="checked">喜欢

    <input type="radio" name="radiolove" value="不喜欢">不喜欢

    <input type="radio" name="radiolove" value="无所谓">无所谓

    <br><br>

    你对那些运动感兴趣?<br>

    <input type="checkbox" name="checkbox1" value="跑步">跑步

    <input type="checkbox" name="checkbox2" value="打球" checked="checked">打球

    <input type="checkbox" name="checkbox3" value="登山">登山

    <input type="checkbox" name="checkbox4" value="健身" checked="checked">健身

</form>

使用下拉菜单,节省空间

<form action="" method="post">

    <label for="">爱好:</label>

    <select name="" id="">

        <option value="读书">读书</option>

        <option value="运动">运动</option>

        <option value="音乐">音乐</option>

        <option value="旅游">旅游</option>

        <option value="购物" selected="selected">购物</option>

    </select>

</form>

value:向服务器提交的值

select="selected"属性,选项默认选中

使用提交按钮,提交数据

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

type:只有当type值设置为submit时,按钮才有提交作用

value:按钮上显示的文字

<form action="" method="post">

    <label for="myName">姓名:</label>

    <input type="text" value="" name="myName">

    <input type="submit" value="提交" name="submitBtn">

</form>

使用重置按钮,重置表单信息

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

<form action="" method="post">

    <label for="myName">姓名:</label>

    <input type="text" name="myName">

    <input type="reset" name="resetBtn" id="" value="重置">

</form>

form表单中的label标签

label标签不会向用户呈现任何效果,它的作用是为鼠标用户改进了可用性。如何你在label标签内点击文本,就会自动触发此控件。就是说,如果用户选中该label标签时,浏览器会自动将焦点转到相关的表单控件上。

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

<form action="">

    <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" name="" id="email" placeholder="Enter email">

</form>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

2074
来自专栏Material Design组件

Material Design — 菜单(Menus)

42410
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 表单

三态复选框的一种常见使用场景是在软件安装时,一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且,该组中的每个选项都可以单独使用双态复选框开启或关闭。

4743
来自专栏Micro_awake web

谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素。 常见的有:<br>...

2506
来自专栏ml

学习HTML5之新特性标签一览(详细)

        HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi....     so --->支持css3...

3308
来自专栏HTML5学堂

如何让旧浏览器支持HTML5新标签

HTML5学堂:开发永远和理论不相同,一旦考虑IE低端浏览器,所有的HTML5新增功能都成了浮云~~~从HTML5新增标签的语义角度来说,是有利于网站SEO的,...

3187
来自专栏Android小菜鸡

自定义View学习之路(四)————图片介绍框

  走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的图片相框为例。开始系统的学习View的绘制。   麻雀虽小却五脏俱全,...

771
来自专栏杨龙飞前端

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

3794
来自专栏一“技”之长

Bootstrap响应式前端框架笔记一——强大的栅格布局

    Bootstrap是一款HTML,Css和JavaScript开发框架,其也支持开发者进行自定义构建,开发者也可以只打包自己需要的功能模块使用。Boot...

3861
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

3234

扫码关注云+社区

领取腾讯云代金券