码迷,mamicode.com
首页 > Web开发 > 详细

HTML

时间:2020-04-12 18:20:21      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:路径   image   段落   结构   oct   控件   pass   文档   效果   

HTML超文本标记语言

技术图片

 

 技术图片

基本结构

 技术图片

1)<!DOCTYPE html>声明为 HTML5 文档,即文档声明;

2)<html>和</html>元素是 HTML 页面的根元素,第二行<html>标签和最后一行</html>定义html文档的整体;<html>标签中的属性lang="en"定义网页的语言为英文,定义成中文的属性是lang="zh-CN",不定义也没什么影响,它一般作为分析统计用。<head>标签和<body>标签是<html>标签的第一层子元素。

3)<head>和</head>元标签里面负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链CSS样式文件和JavaScript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏。其包含了文档的元(meta)数据,如<meta charset="utf-8">定义网页编码格式为utf-8

4)<title>和</title>元素描述了文档的标题,即浏览器打开的网页的标签上显示的名字;

5)<body>和</body>元素里包含了编写网页上可见的页面内容;

6)<h1>和</h1>元素定义一个最大标题;默认有h1到h6六种级别的标题,和word文档的标题层级类似。

7)<p>和</p>元素定义一个文本段落;

8)<br />元素在需要换行的成段的文字处,插入此元素来强制换行。这个不是成对出现的标签。

9)<!-- -->标签是用来括起来注释语句用的。快捷键是CTRL+斜杠键

注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。在标签里的就是其标签的属性。

HTML标签对

 技术图片

注:尖括号<后面跟的都是元素名称。

HTML标题

技术图片

字符实体

    在代码中成段的文字,如果文字间想空多个空格,如果我们敲击空格键多次,在渲染成网页的时候,始终只会显示一个空格。如果想再网页上显示出多个空格,必须使用空格的字符实体:&nbsp;

每一个&nbsp;都只会当作一个空格占位字符,因此需要几个空格,就得连续重复写入几个字符实体。

     另外小于号的字符实体是:&lt; 对应的大于号的字符实体是:&gt;

HTML图像、绝对路径和相对路径

 技术图片

HMTL的超链接<a>

技术图片

 

 技术图片

 

 技术图片

 

 技术图片

a标签和href属性

 技术图片

target属性

使用target属性可以选择一个新窗口里或者原窗口里打开链接文件。

target="_blank"的值就是打开一个窗口显示href的值的链接

<a href="http://www.jd.com" target="_blank">这是京东商城</a>

target="_self"的值就是在原窗口里显示href的值的链接

<a href="http://www.jd.com" target="_self">这是京东商城</a>

title属性

技术图片

name属性

 技术图片

技术图片

name属性是在当前原页面里跳转,如果href指定的是C6,那么就会直接跳到 name="C6"的章节所处的位置。#井号表示的是其后面的就是要跳转到的章节的名字。

HTML列表

技术图片

技术图片

 

 技术图片

HTML表格

技术图片

 

 技术图片

<table border="1">
    <tr>
        <th>姓名</th><th>性别</th><th>年龄</th><th>住址</th>
    </tr>
    <tr>
        <td>小王</td><td>男</td><td>18</td><td>北京</td>
    </tr>
    <tr>
        <td>小张</td><td>女</td><td>18</td><td>深圳</td>
    </tr>
</table>

展示的效果是:

 技术图片

HTML表单

 技术图片

<!-- form元素里的action性里的url地址就是点提交按后跳的目的地,method表示选择getpost协议方式 -->
<form action="http://www.baidu.com" method="post">
    <!-- label标签控件的文字注,inputtext了一个单行文本入框,password了一码输入框,去的是心黑点 -->
   
<label>登录名:</label><input type="text">
    <label>登录密码:</label><input type="password"><br>
    <!-- radio单选框: -->
   
<label>性别:</label>
    <input type="radio" name="sex" value="0">男
    <input type="radio" name=‘sex‘ value="1">女<br>
    <!-- 复选框:允在一组选项选择-->
   
<label>爱好:</label>
    <input type="checkbox" name="" value="basketball">篮球
    <input type="checkbox" name="" value="football">足球
    <input type="checkbox" name="" value="Tennis">网球<br>
    <!-- p标签是一段容的段落,它会与上下其它标签有一定的距,而br元素是行而已,上下距基本-->
    <!-- input
file照片或文件等-->
   
<p>
        <label>上传照片:</label>
        <input type="file" name="person_pic">
    </p>
    <!-- textarea多行文本入框 -->
   
<p>
        <label>个人描述:</label>
        <textarea name="about"></textarea>
    </p>
    <!-- select下拉列表选项,option就是每一个选项 -->
   
<p>
        <label>籍贯:</label>
        <select name="site">
            <option value="0">北京市</option>
            <option value="1">上海市</option>
            <option value="2">广州市</option>
            <option value="3">深圳市</option>
            <option value="4">重庆市</option>
        </select>
    </p>
    <!-- 提交按:里信息提交里的action所指向的文件。另外可以用片控件代替submit提交,一般会导致提交次,不建使用。-->
   <!-- <input type="image" src="xxx.gif"> -->
   
<input type="submit" value="提交">
    <!-- 重置按:将填写的表里的入的容或者选项清-->
   
<input type="reset" value="重置">
</form>

运行结果是:

技术图片

HTML内嵌框架

 技术图片

基本综合示例

下面的html代码,不包含任何css样式:

 技术图片

 

 技术图片

上面的代码在浏览器上呈现的效果如下:

 技术图片

 

HTML

标签:路径   image   段落   结构   oct   控件   pass   文档   效果   

原文地址:https://www.cnblogs.com/douyini/p/12686471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!