HTML基本内容：标记语言、标签

于 2021-03-26 23:04:45 发布
阅读量207 收藏 1
点赞数
分类专栏： HTML 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lml521lml927/article/details/115257170
版权

HTML基本内容：标记语言、标签

一、基本框架

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<title>Title</title>
	</head>
	<body>

	</body>
</html>

1、<!DOCTYPE html>表示当前版本基础信息，写HTML默认为html5

2、head:网页的标题

3、<meta charset="utf-8"> utf-8国际编码，不写会出现问题；、

4、<title>此处内容是网页的标题</title>

5、<body>我们自己写的代码</body>

6、注意：

  • HTML文档不能正常识别空格和换行，只能用特定的标签代码实现
  • 标签、元素、节点 都是用 < >

二、相关标签

···
<body>
    <!--样式结构-->
    <h2><u><i>李白</i></u></h2>
    <p id="123">窗前明月光，123</p>
    <p>疑是地上霜。</p>
    <!-- 什么是相对路径，ctrl+? 添加注释 -->
    <!--br:表示换行-->
    
    <!--图片标签：图片的长宽设置，等比例缩放-->
    <img src="一般为相对路径" title="1.jpg"><br/>
    
    <!--链接-->
    <a href="https://www.baidu.com">百度网站</a>
    
    <!--表单-->
    <form action="" method="post">
        昵称：<input type="text" name="haha" id="" placeholder="请输入昵称"/><br/>
        密码：<input type="password" placeholder="请输入密码"/><br/>
        性别：<input type="radio" name="xb" id="nan" /><label for="nan">男</label><input type="radio" name="xb" id="nv"/><label for="nv">女</label><input type="radio" name="xb" id="bm"/><label for="bm">保密</label>
    </form>
</body>
···

1、h和p标签

  • h1~h6 标题的不同样式
  • p表示文章的段落

2、b-u-i标签

  • b:表示粗体

  • i:表示斜体

  • u:表示下划线

  • strong：通标表示加粗，但又强调的语义

  • em:表示倾斜，也有强调的语义

  • s:表示删除线

  • del:表示删除线，成为当下主流方式

3、图片标签

  • img：表示图片
  • src:表示图片的链接地址（本地），路径一般为相对路径
  • alt表示当图片加载失败时，显示的文字
  • title：在图片上悬停才能显示的内容
  • width，height:表示图片的宽度和高度

4、链接

<a href="链接网址">内容</a>

(1) 空链接的三种表示方法：

		<!-- 不知道写什么地址的时候，使用空连接-->
        <a href="###">还不知道点击后，去哪</a><br/>
        <a href="javascript:;">还不知道点击后，去哪</a><br/>
        <a href="javascript:void(0)">还不知道点击后，去哪</a><br/>

(2) 锚点连接：跳转到123的位置，链接时在锚点名称前一定要加上#

···
<!--设置锚点-->
<p id="123">窗前明月光</p>
···
<a href="#123">跳转到页面某一位置</a><br/>
···

5、表单

表单 : 所有表单填写的数据

  • action代表要提交给哪一个后台程序
  • method表示传输过程中使用哪种形式（post加密）（get不加密)

        <form action="" method="post">
            昵称：<input type="text" name="haha" id="" placeholder="请输入昵称"/><br/>
            密码：<input type="password" placeholder="请输入密码"/><br/>
        </form>
  • input代表输入框，单标签
  • type表示类型，如果使用text，代表最标准的输入框
  • name表示文本框的名字
  • id代表输入框的id标号
  • value代表文本框的提示文字（用户体验不好）
  • placeholder 默认提示文字，属于HTML5专属属性，不兼容IE（6.7.8） ，但是不会造成页面的混乱，我们就认为属性没有问题，以渐进增强（随着浏览器的不断升级，用户体验性越来越好），优雅降级（高版本浏览器效果好，保证低版本浏览器不混乱）

5.1、单选按钮

type类型：radio

性别：<input type="radio" name="xb" id="nan" checked="checked" /><label for="nan">男</label><input type="radio" name="xb" id="nv"/><label for="nv">女</label><input type="radio" name="xb" id="bm"/><label for="bm">保密</label>

注意：

  • 如果按钮为单选，需要将按钮的name属性设置为相同的值；
  • 如果点击文字也可切换，需要添加label标签，并且设置for属性与单选按钮的ID属性值一致；
  • 如果设置默认值，需要在对应的单选框内，加上checked=“checked”键值属性

5.2 下拉选项栏

使用select与option标签组合

<select name="">
    <option value="">山东省</option>
    <option value="">河南省</option>
    <option value="">湖南省</option>
    <option value="">云南省</option>
</select>
<select name="">
    <optgroup label="北京">
        <option value="">海淀</option>
        <option value="">昌平</option>
        <option value="">朝阳</option>
        <option value="" selected="selected">顺义</option>
    </optgroup>
    <optgroup label="上海">
        <option value="">宝山</option>
        <option value="">静安</option>
        <option value="">松江</option>
        <option value="">延长</option>
    </optgroup>
</select>

注意：

  • 如果想设置多组下拉菜单，需要添加一个optgroup标签，并设置label属性作为提醒文字
  • 如果设置默认某一个被选中，需要在option中添加selected="selected"键值属性

5.3 文本框

<textarea rows="59" cols="60"></textarea><br/>

textarea文本域不能使用rows、cols属性设置文本框的大小，不同的浏览器不兼容，必须使用width、height属性设置文本框的大小，也可以使用placeholder来设置默认文字

5.4 多选框

type="checkbox"

爱好：
<input type="checkbox" id="xx" checked="checked"> <label for="xx">学习</label> <input type="checkbox" id="ds"><label for="ds">读书</label> <input type="checkbox" id="lis"><label for="lis">听音乐</label><br/>

效果：

image-20210309224944821

5.5 按钮

<!--提交按钮-->
<input type="submit" value="提交"> 
<!--重置按钮-->
<input type="reset" value="重置">
<!--按钮，以下两种方式都可以-->
<input type="button" value="按钮">
<button> </button>

CSS基础内容:样式表，级联样式表

1、基础语法

<head>
    <meta charset="utf-8">
    <title>登录界面</title>
    <style type="text/css">
		<!--em表示一个字的大小-->
        p{color: red; font-size: 30px; font-family: "楷体";text-align: center; text-indent: 2em}
    </style>
</head>

css代码写在style标签里，放在head标签中；大括号中写键值对语法

2、实体化三属性

width、height、background，必须全部写完后，才能正确显示

3、标签选择器

<div>我是div标签 代表大盒子(容器用来存放内容的) </div>
<span>就是span标签代表小盒子(容器用来存放内容的) </span>

4、ID选择器

<head>
    <meta charset="utf-8">
    <title> </title>
    <style type="text/css">
        #p1{color: red; font-size: 30px; font-family: "楷体"; text-align: left; text-indent: 2em}
        #p2{width: 10; height: 20; background: pink}
        div{color: red}
        span{color: blue}
    </style>
</head>
<body>
    <p id="p1">尊敬的用户：<br>您好！</p>
    <p id="p2">你是:</p>
</body>

名字前面加上#选中

特点：不能重复，具有唯一性

5、类选择器

<head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .p1{color: red;}
            .p2{width: 10; height: 20; background: pink}
			.shxs{font-family: "黑体"}
            div{color: red}
            span{color: blue}
        </style>
    </head>
    <body>
        <p class="p1 shxs">尊敬的用户：<br>您好！</p>
        <p class="p2">你是:</p>
        <p class="p1">你是:</p>
    </body>

可以重复使用，相当于人的称号；class选择器使用频率高于id选择器

6、小项目

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            登录界面
        </title>
        <style type="text/css">
            span{font-size: 100px;}
            .logo_blue{color: blue;}
            .logo_jred{color: #cc3300;}
            .logo_orange{color: orange;}
            .logo_green{color: green;}
        </style>
    </head>
    <body>
        <span class="logo_blue">G</span>
        <span class="logo_jred">o</span>
        <span class="logo_orange">o</span>
        <span class="logo_blue">g</span>
        <span class="logo_green">l</span>
        <span class="logo_jred">e</span>
    </body>
</html>

效果如下：

image-20210309224735305

7、css引入方式

1、内嵌式：

style标签放在head中

优点：方便课上案例的书写；电商网站的首页必须使用这种方式，因为电商首页要
求加载速度必须快，内嵌式比外链式快一些。

缺点：代码没有分离，不方便修改。

2、外链式:
通过link放在head标签中，把外部的css文件引入到html文件中。
优点:实现了代码分离，方便修改和管理；
缺点:运行速度比内嵌稍慢。

3、行内式:。
这种形式一定不要用，它会让代码量变得非常庞大，不方便修改!

8、文字属性

  • font-weight：表示字体是否加粗，normal 正常；bold加粗
  • font-style：表示文字样式，normal正常；italic倾斜
  • text-decoration：下划线，none无下划线；line-through删除线；underline下划线；overline 上划线
  • ：hover：表示鼠标悬停状态的样式，伪类

9、行高属性

  • line-height：表示行高

10、边框属性

  • border：1px solid red ：全设置，边框的宽度，线型，线型颜色
  • border-bottom：1px solid red ：只设置边框底部的宽度，线型，线型颜色
  • solid 实线；dash 虚线；这**两种线型多个浏览器兼容，其他线型可能不兼容，需要提问题**

11、盒子模型

  • 内边距：padding：2px
  • 外边距：margin：2px

12、html5新标签-

  • header：头部
  • nav：导航条
  • aside：侧导航
  • article：文章块
  • footer：底部
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值